react应用程序重新布线，需要提供mini-css提取插件

Question

我目前正在使用与自定义cra重新连接的react应用程序。目前，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
)

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