Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):

ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'plugins'. These properties are valid: object { postcssOptions?, execute?, sourceMap?, implementation? } at validate (C:\Users\w\Desktop\project\react-template\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11) at Object.getOptions (C:\Users\w\Desktop\project\react-template\node_modules\webpack\lib\NormalModule.js:578:19) at Object.loader (C:\Users\w\Desktop\project\react-template\node_modules\postcss-loader\dist\index.js:40:24)

 

先附上关键插件版本号

    "antd": "^4.18.2",
    "babel-plugin-import": "^1.13.3",
    "customize-cra": "^1.0.0",
    "less": "^4.1.2",
    "less-loader": "^7.3.0",

 

根据antd@3x文档中按需加载配置发现，会报如上错误，是因为less-loader版本问题，网上有人说降低版本号就行了，其实没必要只需要在config-overrides.js文件里如下加入postcssOptions即可

onst { override, fixBabelImports, addLessLoader } = require("customize-cra");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    // style: "css",
    style: true,
  }),
  addLessLoader({
    // postcssOptions 按需加载antd关键
    postcssOptions: {
      javascriptEnabled: true,
      modifyVars: { "@primary-color": "#1890ff" }, //配置相关主题颜色
    },
  })
);