react应用程序-重新连线要求提供迷你-css-提取-插件

Question

我目前使用的反应-应用-重新连线自定义-cra。目前，npm start可以工作，但是npm run build给出了以下错误。

Error: You forgot to add 'mini-css-extract-plugin' plugin

不太确定发生了什么，这里是我的config-overrides.js文件。我尝试在这里添加插件，但由于某些原因，我继续得到这个错误。

// Overriding CreateReactApp settings, ref: https://github.com/arackaf/customize-cra
const {
  override,
  fixBabelImports,
  addLessLoader,
  useEslintRc,
  addDecoratorsLegacy,
  useBabelRc,
  addWebpackPlugin
} = require('customize-cra')
// eslint config
const eslintConfig = require('./.eslintrc.js');

const useEslintConfig = configRules => config => {
  config.module.rules = config.module.rules.map(
    rule => {
      // Only target rules that have defined a `useEslintrc` parameter in their options
      if (rule.use && rule.use.some(use => use.options && use.options.useEslintrc !== void 0)) {
        const ruleUse = rule.use[0]
        const baseOptions = ruleUse.options
        const baseConfig = baseOptions.baseConfig || {}
        ruleUse.options = {
          useEslintrc: false,
          ignore: true,
          baseConfig: { ...baseConfig, ...configRules },
        }
        return rule

        // Rule not using eslint. Do not modify.
      } else {
        return rule
      }
    }
  );
  return config;
}

module.exports = override(
  addDecoratorsLegacy(),
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css', // dont use true
  }),
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEslintRc(),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
    },
  }),
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEslintConfig(eslintConfig),
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useBabelRc(),
);

知道为什么吗？

Answer 1

对我来说，解决方案是在config-overrides.js中做以下更改

const {
  override,
  ...
  addWebpackPlugin, // <- added this line here
} = require('customize-cra')

const MiniCssExtractPlugin = require('mini-css-extract-plugin') // <- added this line here

module.exports = override(
  ...
  addWebpackPlugin(new MiniCssExtractPlugin()), // <- added this line here
)

在此之后，构建过程就成功了，没有任何问题。