React项目使用less报错：PostCSS Loader has been initialized using an options object that

今天通过脚手架npx create-react-app新创建React项目，通过override配置使用less样式，运行报错：PostCSS Loader has been initialized using an options object that does not match the API schema

在网上查询资料，尝试多次都无法解决，最后通过一下方式解决，话不多说，上干货： 1、安装customize-cra react-app-rewired less less-loader postcss postcss-loader

npm i customize-cra react-app-rewired less less-loader postcss postcss-loader -D

2、配置 config-overrides.js 文件

const {
  override,
  addWebpackAlias,
  addLessLoader,
  fixBabelImports,
  adjustStyleLoaders
} = require("customize-cra");
const path = require("path");

module.exports = override(
  // 配置路径别名
  addWebpackAlias({
    assets: path.resolve(__dirname, "./src/assets"),
    components: path.resolve(__dirname, "./src/components"),
    pages: path.resolve(__dirname, "./src/pages"),
    utils: path.resolve(__dirname, "./src/utils"),
  }),
  // lessloader配置
  addLessLoader({
    lessOptions: {
      // 可以使用index.module.less
      javascriptEnabled: true,
    },
  }),
  // ***解决PostCSS Loader has been initialized using an options object that does not match the API schema. 报错
  adjustStyleLoaders(({ use: [, , postcss] }) => {
    const postcssOptions = postcss.options;
    postcss.options = { postcssOptions };
  }),
  // antd 样式导入，配置后无需在代码中自己再引入 import 'antd/dist/antd.min.css';
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css",
  })
);