用customize-cra+react-app-rewired配置less+css module的踩坑经历

参考过程中看到最有参考价值的是这篇文章：React中使用less(use CSS Modules)的两种配置方法

但是可能因为时效性原因，我按照这篇文章的步骤配置之后报了这个错，就算去掉了javascriptEnabled也无济于事

bash
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'javascriptEnabled'. These properties are valid:
   object { lessOptions?, additionalData?, sourceMap?, webpackImporter?, implementation? }

后来又参考了这篇文章：使用 Customize Cra 管理 React 项目，从中了解到

因为 create-react-app 与 react-app-rewired 是基于 webpack4 来开发的，而 less-loader 的最新版本是基于 webpack5 来开发的，所以最新版的 less-loader 是不支持我们的脚手架项目的，所以这里需要指定 less 和 less-loader 版本号

因此按照该文章所述，降低了less和less-loader的版本

bash
yarn add -D less@4.1.1 less-loader@7.3.0
// 或者
npm i -D less@4.1.1 less-loader@7.3.0

然而依然报相同的错误……

于是去customize-cra的github仓库的issue搜索了一下，参考Incompatible with Create-React-App 5.0: Invalid Options for PostCSS Loader，最终可运行配置如下

JavaScript
// config-overrides.js
const {
  override,
  addLessLoader,
  adjustStyleLoaders,
} = require("customize-cra");

module.exports = {
  webpack: override(
    addLessLoader({
      lessOptions: {
        javascriptEnabled: true,
        modifyVars: { "@primary-color": "#13c2c2" },
      },
    }),
    // ↓加了这么个配置
    adjustStyleLoaders(({ use: [, , postcss] }) => {
      const postcssOptions = postcss.options;
      postcss.options = { postcssOptions };
    }),
  ),
};

另外在此贴一下该项目相关配置的版本号

json
  "customize-cra": "^1.0.0",
  "less": "4.1.1",
  "less-loader": "7.3.0",
  "react-app-rewired": "^2.2.1"