React less less-loader的使用，以及‘{’报错解决

React less语法支持编译与less的配置，以及‘{’报错解决（第3步）

本次的less编译，主要基于less-loader这个包

1、首先呢我们需要展开我们的webpack配置文件，这个在react中是默认隐藏的，你需要将它显示出来(注意此操作是不可逆的)

npm run eject

2、然后我们需要下载less-loader

//less-loader负责打包转码

npm i less less-loader -s   //本地化安装less和lessloader

3、然后我们就需要进行环境的配置了

这里主要是对打包配置文件中进行修改
修改呢，主要是参照css-loader进行编写
进入我们的config文件，我们会看到Webpack.config.js

打开改文件，依次修改
1、

const lessRegex = /.less$/;

const lessModuleRegex = /.module.less$/;

2、


这个时候要注意，你的less-loader应该是在postcss-loader这个加载模块之后，这样才能识别rem，这也是‘{’报错解决的办法

3、
参照：

在该css模块下面编写：

{
              test: lessRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            },

这样你的less就能直接加载到js组件中了
直接引用less文件
举例：

配置rem的话，现在还没找到绝佳方法，我现在用的也有一点点小Bug，就是不能再pc端正常的缩放，后面进行的调试也是大概，不能精准，之后找到更好的方法，则会进行分享。