前言

官方的 create-react-app创建的项目默认是不支持 less 的，但是又写不惯其他的预处理语言

方法

第一步

//安装 less与less-loader
yarn add less less-loader --save-dev

第二步

//弹出默认配置，create-react-app创建的项目默认是没有webpack.config.js的
yarn eject

第三步

// 在webpack.config.js文件中，仿sass的引入
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'
              ),
            }

注意

TypeError: this.getOptions is not a function 错误

这是由于less-loader版本过高导致，使用7.3.0版本即可。相关原因可以查看less-loder Issues

对webpack不算熟悉，若有错，欢迎留言指导！