mini-css-extract-plugin 提取的 CSS 为什么没加到 HTML 里？

皇甫宏赛提问于 2026-03-27 19:54:21 阅读 12

前端

我用 mini-css-extract-plugin 把 CSS 抽离出来了，生成了单独的 .css 文件，但页面打开后样式没生效，HTML 里也没看到 link 标签引入这个 CSS 文件。

是不是还要配合 html-webpack-plugin 才行？我现在的配置大概是这样的：

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

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ],
  module: {
    rules: [
      {
        test: /.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  }
};

打包后确实生成了 CSS 文件，但 HTML 里没自动插入引用，是我漏了什么步骤吗？

我来解答赞 1 收藏

反馈

1 条解答

UE丶东昇 Lv1

嗯，你说得对，确实要配合 html-webpack-plugin 用才行。试试这个，在 plugins 里加个新的 HtmlWebpackPlugin：

const HtmlWebpackPlugin = require('html-webpack-plugin');



module.exports = {

  plugins: [

    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),

    new HtmlWebpackPlugin({

      inject: true

    })

  ],

  // 其他配置保持不变

}

记得装下 html-webpack-plugin 这个包，不然会报错。累死我了，但希望这能帮你解决问题。

2026-03-27 20:00