react antd按需加載報錯

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" }, //配置相關主題顏色
    },
  })
);