React使用less语法

1. 安装

yarn add less less-loader or npm i less less-loader

2. 打开webpack配置文件

创建项目的时候我们是看不到webpack文件的 需要暴露出来

yarn eject or npm run eject

3. 配置less语法环境

在config文件下找到webpack.config.js文件
打开webpack.config.js找到如下图：

在下面添加如下两句代码：

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

添加完上面两句代码后收索oneOf
找到配置sass的代码片段，如图：

在其下面添加如下代码：

		 {

          	  test: lessRegex,

              exclude: lessModuleRegex,

              use: getStyleLoaders(

                {

                  importLoaders: 2,

                  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,

            },

            // Adds support for CSS Modules, but using SASS

            // using the extension .module.scss or .module.sass

            {

              test: lessModuleRegex,

              use: getStyleLoaders(

                {

                  importLoaders: 2,

                  sourceMap: isEnvProduction && shouldUseSourceMap,

                  modules: true,

                  getLocalIdent: getCSSModuleLocalIdent,

                },

                'less-loader'

              ),

            },

4. 启动时报错

如果启动报下面错，说明你的less-loader版本过高，不兼容 getOptions 函数方法，所以需要对 less-loader 进行降级处理

解决方法：
通过 npm uninstall less-loader 命令卸载原版本的 less-loader，然后 通过 npm install less-loader@5.0.0 命令下载降级版本的 less-loader，这个问题就可以解决了