已使用与 API 架构不匹配的选项对象初始化 PostCSS Loader

Question

将 react-scripts 从版本 4 升级到版本 5 后我遇到了这个问题！

我将 customize-cra 与以下选项一起使用：

module.exports = override(
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: {
        '@primary-color': '#038fde',
      },
    },
  }),
  useBabelRc(),
);

ERROR in ./src/styles/wieldy.less (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[9].use[3]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[4]!./src/styles/wieldy.less)

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:\Workspace\harv-Harvest-frontend\node_modules\schema-utils\dist\validate.js:105:11)
    at Object.getOptions (C:\Workspace\harv-Harvest-frontend\node_modules\webpack\lib\NormalModule.js:580:19)
    at Object.loader (C:\Workspace\harv-Harvest-frontend\node_modules\postcss-loader\dist\index.js:40:24)

Answer 1

也有这个问题。

似乎自从 less-loader 6 customize-cra“addLessLoader”已损坏。

此 PR 修复它，但从未合并。同一个人创建了这个包： customize-cra-less-loader

解决这个问题：

安装customize-cra-less-loader包
"config-overrides.js" 应该是这样的：

const { override } = require("customize-cra");
const addLessLoader = require("customize-cra-less-loader");

module.exports = override(
  addLessLoader({
    lessLoaderOptions: {
      lessOptions: {
        javascriptEnabled: true,
        modifyVars: {
          '@primary-color': '#038fde',
        }
      }
    }
  })
);

已使用与 API 架构不匹配的选项对象初始化 PostCSS Loader

PostCSS Loader has been initialized using an options object that does not match the API schema

reactjs

cra