React安装less模块

一、安装less模块

1.安装less模块

npm i less less-loader --save

2.暴露文件

yarn eject

3.需要配置config>webpack>webpack.config.js文件（需要配置三个地方）

注意如果没有config文件夹，则运行下面代码

git add .

git commit -m 'xx'

#再次暴露
yarn eject

成功后，会生成config文件夹，找到webpack.config.js文件。

二、在webpack.config.js中添加配置

1.第一处配置

在文件中Ctrl+F搜索，搜索 style files regexes 找到位置后，添加如下代码

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

如图参考

2.第二处配置 

在文件中Ctrl+F搜索，搜索 getStyleLoaders 找到位置后，添加如下代码

 {
      loader: require.resolve('less-loader'),
      options: lessOptions,
 },

如图参考

3.第三处配置 

在文件中Ctrl+F进行搜索，搜索sassRegex 找到位置后，添加如下代码

{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                      importLoaders: 1,
                      sourceMap: isEnvProduction && shouldUseSourceMap,
                  },
                  'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                      importLoaders: 1,
                      sourceMap: isEnvProduction && shouldUseSourceMap,
                      module: true,
                      getLocalIdent: getCSSModuleLocalIdent
                  },
                  'less-loader'
              ),
            },

 

如图参考

 

到这里less配置完成了，重启项目。

三、less的使用与css的明显区别

使用时将css后缀改成less就行了，注意使用的区别。