react-app-rewired 需要提供 mini-css-extract-plugin答案

【问题标题】：react-app-rewired requiring giving mini-css-extract-pluginreact-app-rewired 需要提供 mini-css-extract-plugin
【发布时间】：2022-01-14 19:36:11
【问题描述】：

我目前正在使用 react-app-rewired 和 custom-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(),
);

知道为什么吗？

【问题讨论】：

标签： reactjs webpack create-react-app react-app-rewired customize-cra

【解决方案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
)

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

【讨论】：