react引入ant design landing时出现错误与postcss-loader有关

Question

react引入ant design landing时出现错误与postcss-loader有关

开始根ant design官网按步骤配置和安装依赖，npm start就报错

一开始报这个错，我降了一下版本

cnpm install less-loader@7.0.1 postcss-loader@4.0.4 -D

换了一个报错

又降了一下

cnpm install postcss-loader@~3.0.0 --save-dev

然后就是这两个错误之间跳来跳去

本人对webpack了解不是很深，只是按照步骤配置了一下config-overrides.js文件，代码如下（官网上摘的）

这里安装了"customize-cra": "^1.0.0"和"react-app-rewired": "^2.2.1",

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  // Load antd
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  // Add `javascriptEnabled` and antd theme configuration
  // to the Less loader
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: { '@primary-color': '#1DA57A' },
    }
  }),
);

然后就不知道了，它只报那几个错误，哪位大l看到了能帮忙解答一下，十分感谢

Answer 1

报错代码，这两个报错网上看起来很常见，但是解决了一个另一个又出来了：

Module build failed (from ./node_modules/_postcss-loader@4.0.4@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? }

Module build failed (from ./node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js):
Error: PostCSS plugin postcss-flexbugs-fixes requires PostCSS 8.
Migration guide for end-users: