React中配置入less

在一开始配置的时候并没有想到less是需要配置的，以为直接create一个less的文件就可以解决了。结果并不是，在网上也看了需要教程，五花八门。最终经历一番折腾，勉强配出来了，通过这篇文章回顾整一个过程。

由于在React中，webpack、babel等等都会被 create react app封装到react-scripts中，包括基本的启动命令都是通过这个scripts进行启动的。故需要配置less文件需要修改webpack的配置文件，因此需要先将其从封装中提取出来

npm run eject

 这个命令要么在一开始创建react项目的时候就执行

若在修改代码以后，那么需要将代码git commit到local的记录中，然后在执行此命令

个人理解就是需要在没有修改记录的状态下执行

解压以后就会有这个文件出现在目录下

 

选择 webpack.config.js 这个文件进行修改

修改其实可以完全安装cssRegx的这个格式进行模仿修改的

模仿css的那两个值，在下面添加两个新的值

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

 然后在代码中找到

test: cssRegex

// 找到者两个，连在一起的
            {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules: {
                  mode: 'icss',
                },
              }),
              // 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,
            },
            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
            // using the extension .module.css
            {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules: {
                  mode: 'local',
                  getLocalIdent: getCSSModuleLocalIdent,
                },
              }),
            },


//========== 复制上面的两个值，然后进行小修改就好了 ===============
            {
              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'
              ),
            },

然后就配置好了，觉得这种配置就不要怎么记，不过下面那个我是模仿sass那个的，所以loaders是3，具体值什么意思有机会在琢磨， 现在就是可以使用less文件进行Css样式的配置了