为什么用 mini-css-extract-plugin 提取的 CSS 在 Vue 组件里不生效？

Tr° 玉聪提问于 2026-03-10 17:41:19 阅读 2

前端

我用 Webpack 的 mini-css-extract-plugin 把 CSS 单独抽出来了，但发现 Vue 组件里的样式根本没加载，页面一片空白。明明 build 出来的 CSS 文件有内容，也正确引入了，就是不生效。

我试过把 extract 改成 false 用 style-loader，样式就正常了，一开启提取就不行。是不是哪里配置错了？

<template>
  <div class="box">测试文字</div>
</template>

<style scoped>
.box {
  color: red;
  font-size: 20px;
}
</style>

我来解答赞 2 收藏

反馈

1 条解答

Prog.奕洳 Lv1

问题出在 vue-loader 没开 extractCSS。

Vue 项目用 mini-css-extract-plugin 必须在 vue-loader 配置里加 extractCSS: true，否则默认把所有 CSS 塞进 JS 里，外部的 CSS 文件虽然生成了但内容是空的。

在 vue-loader 配置里加上这个选项就行：

// webpack 配置

{

  test: /.vue$/,

  loader: 'vue-loader',

  options: {

    extractCSS: true  // 加这个

  }

}

如果是 vue-loader 15+，可能还需要确保 css-loader 那边也配置了。

2026-03-10 19:07