react脚手架配置less

前言：

react搞得很奇怪，既然脚手架里配置了sass语法，为什么不把less语法也配置进去。还让开发者自己配置下。

言归正传：下面开始配置。

①：安装less

npm install --save less less-loader

②：找到node_modules/react-scripts/config/webpack.config.js

③：配置

截图：

代码：

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

 

找到sass的配置，直接在sass配置下拷贝一份修改里面的东西就可以

截图：

代码：

 {
              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: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },

最后直接import你的less文件就可以啦！