起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"