Storybook HTML构建失败：mini-css-extract-plugin错误求助

问题原因 #

你在Storybook的webpack配置中添加了使用mini-css-extract-plugin loader的SCSS规则，但未将对应的插件实例添加到Storybook的webpack插件数组中，导致loader报错找不到匹配的插件。

修复步骤 #

修改.storybook/main.js，引入项目的webpack插件配置，并将MiniCssExtractPlugin添加到Storybook的webpack插件列表：

const myWebpackConfig = require('../config/webpack.config')
const loaders = require('../config/webpack.loaders')
const webpackPlugins = require('../config/webpack.plugins') // 新增：引入项目插件配置

const sassLoader = loaders.find(loader => loader.test.test('.scss'))

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/html",
  webpackFinal: async (config) => {
    config.module.rules.push(sassLoader)
    config.resolve.alias = {
      ...config.resolve.alias,
      ...myWebpackConfig.resolve.alias,
    }
    // 新增：合并项目插件到Storybook的webpack插件列表
    config.plugins = [...config.plugins, ...webpackPlugins]

    return config
  },
}

注意事项 #

如果项目webpack插件中存在与Storybook内置插件冲突的配置（比如重复的HtmlWebpackPlugin），可以只保留MiniCssExtractPlugin，避免冲突：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 替换webpackFinal中的插件合并代码
config.plugins = [
  ...config.plugins,
  ...webpackPlugins.filter(plugin => plugin instanceof MiniCssExtractPlugin)
]

内容的提问来源于stack exchange，提问作者Twinkle