create-react-app创建react项目使用less的修改过程。

在使用create-react-app创建react项目的时候，原始的项目结构是不能够使用less预编译器。

1. 使用 yarn reject暴露配置文件

$ yarn reject

$ react-scripts eject

NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

? Are you sure you want to eject? This action is permanent. (y/N) 

输入y

2. 修改config/webpack.config.js

//找到如下代码

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

//修改为如下代码

const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.(css|less)$/;

//找到这段代码

test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true


//修改为如下代码

test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
    importLoaders: 2,
    sourceMap: isEnvProduction && shouldUseSourceMap,
  },
    'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,

记得下载less相关的依赖包。

然后就ok了。