如何为Vue组件的普通CSS配置extract text plugin（已配置Sass/SCSS）

Hey there! Let's walk through how to set up the ExtractTextPlugin to handle both plain CSS files and styles inside Vue components, building on your existing Sass/SCSS configuration.

1. Configuring for Plain CSS Files #

First, make sure you've already got the extract-text-webpack-plugin installed (if not, run npm install --save-dev extract-text-webpack-plugin). Then, add a new rule to your webpack config to process .css files:

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      // Keep your existing Sass/SCSS rule here
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
      // Add this rule for plain CSS
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader', // Fallback to injecting styles if extraction fails
          use: 'css-loader' // Processes CSS imports and url() references
        })
      }
    ]
  },
  plugins: [
    // Specify the output path/filename for extracted styles
    new ExtractTextPlugin('dist/styles/[name].css'),
    // Your other webpack plugins go here
  ]
};

2. Configuring for Vue Components #

To extract styles directly from Vue single-file components (.vue files), you'll need to tweak your vue-loader configuration. Here's how to do it:

Step 1: Ensure Dependencies are Installed #

Make sure you have vue-loader, vue-template-compiler, and vue-style-loader installed:

npm install --save-dev vue-loader vue-template-compiler vue-style-loader

Step 2: Update Webpack Config #

For vue-loader v15+ (the current stable version), you also need to include the VueLoaderPlugin. Here's the full config:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // Required for vue-loader v15+

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // Enable CSS extraction globally for Vue components
          extractCSS: true,
          // Or, configure loaders per style language (more granular control)
          loaders: {
            css: ExtractTextPlugin.extract({
              use: 'css-loader',
              fallback: 'vue-style-loader' // Fallback if extraction isn't possible
            }),
            scss: ExtractTextPlugin.extract({
              use: ['css-loader', 'sass-loader'],
              fallback: 'vue-style-loader'
            })
          }
        }
      },
      // Keep your existing CSS/Sass rules here
    ]
  },
  plugins: [
    new VueLoaderPlugin(), // Mandatory for vue-loader v15+
    new ExtractTextPlugin('dist/styles/[name].css') // Same plugin instance works for all styles
  ]
};

Key Notes #

• Multiple Output Files: If you want to split styles into separate files (e.g., component styles vs. global styles), create multiple instances of ExtractTextPlugin with different filenames, then reference the appropriate instance in each loader rule.
• Webpack 4+ Consideration: The official webpack team recommends using mini-css-extract-plugin instead of extract-text-webpack-plugin for webpack 4 and above, as it's better optimized for newer webpack features. But if you're sticking with extract-text-webpack-plugin, the above config will work.
• Dev vs. Prod: You might want to disable extraction in development mode (use vue-style-loader or style-loader directly) for faster hot module replacement, then enable it only in production.

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