react中webpack.config.js配置lessless-loader less

1、安装less-loader和less

npm install less-loader less -sava--dev

2、暴露webpack配置文件

yarn run eject 

如果遇到如下问题，

可具提示需commit ，这是git地址有问题，输入如下命令行

git add .
git commit -am "Save before ejecting"

然后再输入：yarn run eject 就可以了

注意：如果还是不行，将项目传到github，建立本地连接，再输入：yarn run eject 应该就可以了

3、修改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,
            },

ojbk