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

这个问题我遇到过，核心原因是 loader 顺序错了。

问题根源

mini-css-extract-plugin 的 loader 必须放在 css-loader 之后，因为它只负责把 CSS 抽离成单独文件，但不会处理 CSS 本身。而 Vue 组件的 scoped CSS 需要先经过 css-loader 处理（注入唯一属性选择器），然后才能被正确提取。

如果你把 MiniCssExtractPlugin.loader 放在 css-loader 前面，CSS 根本没经过处理就被抽走了，scoped 的属性选择器都没加进去，样式当然不生效。

解决方案

检查你的 webpack 配置里的 CSS rule，正确的顺序应该是这样：

// webpack.config.js

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



module.exports = {

  // ...

  module: {

    rules: [

      {

        test: /.css$/,

        // 注意 loader 的顺序：先 css-loader，后 MiniCssExtractPlugin.loader

        use: [

          // 生产环境提取 CSS，开发环境用 style-loader 内联

          process.env.NODE_ENV === 'production' 

            ? MiniCssExtractPlugin.loader 

            : 'vue-style-loader',

          'css-loader',   // 这个必须放在 MiniCssExtractPlugin.loader 之后

        ],

      },

    ],

  },

  plugins: [

    // 生产环境才需要这个插件

    new MiniCssExtractPlugin({

      filename: 'css/[name].[contenthash:8].css',

    }),

  ],

};

额外注意

如果你的项目用了 PostCSS（比如 Autoprefixer），还需要把 postcss-loader 加到 css-loader 后面：

use: [

  process.env.NODE_ENV === 'production' 

    ? MiniCssExtractPlugin.loader 

    : 'vue-style-loader',

  'css-loader',

  'postcss-loader',  // 如果用了 PostCSS 的话

],

另外确认一下 vue-loader 的版本。vue-loader v15+ 需要在配置里加个 css: true 或者单独处理 CSS：

// vue-loader.config.js

const { VueLoaderPlugin } = require('vue-loader');



module.exports = {

  plugin: new VueLoaderPlugin(),

  // 确保这里有处理 CSS 的配置

  css: {

    extract: process.env.NODE_ENV === 'production' 

      ? MiniCssExtractPlugin.loader 

      : false,

  },

};

总结一下：先检查 loader 顺序是不是 css-loader 在前、提取 loader 在后，再检查 vue-loader 的 CSS 配置。基本就是这两个地方出问题。

问题出在 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 那边也配置了。