create-react-app 强制更新到了 5.0.0 ，启用的是 webpack5，在配置 less 的时候出现错误 postcss Loader has been initialized using an options object that does not match the API schema，影响项目开展，望修复 about customize-cra

[ThalesMR]

same issue

[iNiL0119]

+1

[Litao21]

+1

[Shin1122]

+1

[darkfiredarkhalo]

+1

[Chalkzhu]

+1

[mushan0x0]

#315 (comment)

[dalongjason]

+1

[leojh]

Duplicate of #315

[guo405394956]

+1

[jiangxuzh]

same issue

[xia-yu-fei]

我也出现了这种现象，原本 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;

再运行的时候就成功了，可以参考一下