起cinnamon的时候要给项目配置less和css module,网上查阅的大多数资料是暴力yarn eject再修改配置,然而这并不是react官方推荐使用的办法,所以打算改用customize-cra进行配置

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

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

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的版本

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,最终可运行配置如下

// 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 };
    }),
  ),
};

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

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