customize-cra
customize-cra copied to clipboard
create-react-app 强制更新到了 5.0.0 ,启用的是 webpack5,在配置 less 的时候出现错误 postcss Loader has been initialized using an options object that does not match the API schema,影响项目开展,望修复
same issue
+1
+1
+1
+1
+1
https://github.com/arackaf/customize-cra/issues/315#issuecomment-1009628736
+1
Duplicate of #315
+1
same issue
我也出现了这种现象,原本 customize-cra 的配置 如下
const { addLessLoader } = require("customize-cra");
const addLessConfig = () => {
return [
addLessLoader({
javascriptEnabled: true,
additionalLoaders: ["less-loader"],
cssModules: {
localIdentName:
process.env.NODE_ENV === "development"
? "[path][name]__[local]--[hash:base64:5]"
: "[sha512:hash:base64:7]",
},
}),
];
};
module.exports = addLessConfig;
解决方式是引入了一个新的库 customize-cra-less-loader
看这个库的介绍,是专门为 react-scripts version >= v5.0.0
使用的,因为 react-scripts
依赖的 webpack
是 V5 版本
升级 less less-loader
npm i -D customize-cra-less-loader less less-loader
const addLessLoader = require("customize-cra-less-loader");
const addLessConfig = () => {
return [
addLessLoader({
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
additionalLoaders: ["less-loader"],
cssModules: {
localIdentName:
process.env.NODE_ENV === "development"
? "[path][name]__[local]--[hash:base64:5]"
: "[sha512:hash:base64:7]",
},
},
},
}),
];
};
module.exports = addLessConfig;
再运行的时候就成功了,可以参考一下