react项目进行less配置

前言：

由于 create-react-app 脚手架中并没有配置关于 less 文件的解析，所以我们需要自己进行配置。需要安装插件 less less-loader。

安装步骤：

1. create-react-app file_name创建新项目或打开已创建的项目
2. 安装less

npm install less less-loader --save
           

3.拉取react的配置文件

npm run eject 
           

4.在webpack.config.js文件中找到 css和sass配置项,在其之后加上，并模仿sass的写一份less的配置

const lessRegex =/\.less$/;
const lessModuleRegex =/\.module\.less$/;
           

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

5.正常到这里，只要重新运行项目即可

可能出现的问题：

1.npm run eject拉取配置文件时出错

原因：如文件被修改，无法运行，可能是.git文件的存在问题。

解决方案：到文件目录下，删除.git文件即可

1. 安装完成重新运行出错

   

   原因： less-loader安装的版本过高

   解决方案：

1.npm uninstall less-loader
2.npm install [email protected]