react-create-app脚手架自定义添加less支持

需要自己配置webpackconfig

 

打开文件夹根目录命令行输入npm run eject 

安装下载：cnpm run less less-loader -D (别忘了less-loader)

项目中会多一个文件夹 config=》找到webpack.config.js (网上说更改两个文件配置 dev和pro.configjs老版本方式，太麻烦这里不推荐)

 

直接更改webpack.config.js 即可

1：新增：（大概在头不几十行内）
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//新加less
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

2：新增lessregex规则：

            //新增less
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  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,
            },

3：新增ModuleRegex规则：

 // 新增less moduleregex
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },

说明：

新增规则中一般比较靠后面大概在配置文件四五百行的样子：怕写错的话可以找到sass的更改规则（一般都会默认有sass配置）复制一份放下面找到sass处改成less即可

最后别忘了重新启动程序（更改webpack需要重新启动）

npm start

然后就可以正常创建less文件引用了