一波三折的react + less

本来只是想实现一个less的模块化功能，结果网上查到很多方法说要react-scripts eject！

想着我也没折腾过webpack.config.js也就试试，然后在那文件下增加配置：

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
... // 位于 sassModuleRegex 之后 
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'less-loader'
              ),
              sideEffects: true,
            },

加完以后发现，单纯引用less可以，但是模块化不行？！

又找了半天，发现之前的“攻略”里缺了个modules: true,。加完后确实可以模块化引import styles from './index.less';，但是原本的全局配置类又失效了！

加上对eject出来一堆完全用不到的东西越看越不顺眼，干脆推倒重来。

本来我项目用的就是react-app-rewired，所以在这基础上引less，然后找到的方法是修改config-overrides.js：

const {override, addLessLoader} =require('customize-cra');
 
module.exports = override(
  // 使用less-loader对源码重的less的变量进行重新制定
  addLessLoader({
      javascriptEnabled: true,
      modifyVars:{'@primary-color':'#1DA57A'},
  })
);

其实这样写不算错，问题在于版本不对，这已经是旧版本的写法了，会报错：

Invalid options object. Less Loader has been initialized using an options object that does not match the API schema. （注1）

然后网络上说是版本问题，要升版本或降版本，我也就在这折腾了一段时间。因为package里没主动安postcss，还遇到了一串连环错：

PostCSS plugin postcss-flexbugs-fixes requires PostCSS 8.

PostCSS plugin postcss-normalize requires PostCSS 8.

……

后来注意到（注1）下面的报错变成了：

options has an unknown property ‘modifyVars’. These properties are valid:

object { lessOptions?, prependData?, appendData?, sourceMap? }

这明显就是配置格式不对嘛，所以搜新版本addLessLoader应该怎么写，于是config-overrides.js改为：

const { override, addLessLoader } = require("customize-cra");
const path = require("path");
module.exports = override(
  // 使用less-loader对源码重的less的变量进行重新制定
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      cssModules: {
          localIdentName: "[path][name]__[local]--[hash:base64:5]",
      }
    },
  }),
); 

结果这样还是不行？！途中又试了adjustStyleLoaders、(config) => { return config}等就不提了。

最后发现，其实是模块化默认要写成xxx.module.less的后缀，就缺改名而已。终于解决了又能全局定class，又能模块化styles，还省得看eject拉出来的一堆东西。

P.S.本来以为adjustStyleLoaders这东西没有用，删掉也不影响。但重新建了个项目发现还得加：

const { override, addLessLoader, adjustStyleLoaders, addWebpackAlias } = require("customize-cra");
const path = require("path");
 
module.exports = override(
  // 使用less-loader对源码重的less的变量进行重新制定
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      cssModules: {
        localIdentName: "[path][name]__[local]--[hash:base64:5]",
      }
    },
  }),
  adjustStyleLoaders(({ use: [, , postcss] }) => {
    const postcssOptions = postcss.options;
    postcss.options = { postcssOptions };
  }),
  //增加路径别名的处理 
  addWebpackAlias({
    '@': path.resolve('./src')
  }),
);