create-react-app配置使用less文件

1. 场景

使用create-react-app脚手架创建的项目引入less文件，没有显示报错信息，但是不生效

2. 解决

2.1 安装less

npm install less less-loader --save

注：如果页面显示不出来，报一大堆错，很有可能是因为他们版本的问题。
我使用的版本：
“less”: “^4.1.3”,
“less-loader”: “^5.0.0”,

2.2 拉取项目的配置文件

使用create-react-app脚手架创建的项目默认不显示config目录，执行npm run eject 拉取
出现如图所示的错误：

原因：修改项目文件后没有存储到本地库，按下图操作即可

1. git add .
2. git commit -m "配置less"
3. 执行npm run eject
4. 此时项目中新增了config 和 scripts 两个文件夹

2.3 修改配置文件config/webpack.config.js

2.3.1 搜索sassModuleRegex ，添加代码

//在这里添加less正则
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;

2.3.2 搜索 getStyleLoaders，添加代码

{
    loader: require.resolve('less-loader'),
    options: lessOptions,
},

2.3.3 搜索 sass-loader ，添加代码

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'less-loader'
  ),
},

2.4 重新启动项目

可以看到less文件的样式生效了