PostCSS Loader已使用与API模式不匹配的选项对象进行初始化。

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)

- niltonxp

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',
        }
      }
    }
  })
);

- Yinon Vahab