Extracting CSS into a Single File

npm install extract-text-webpack-plugin --save-dev

The Easy Way

requires vue-loader@^12.0.0 and webpack@^2.0.0

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          extractCSS: true
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

The above will automatically handle extraction for <style> inside *.vue files and works with most pre-processors out of the box.

Note this only extracts *.vue files though - CSS imported in JavaScript still needs to be configured separately.

Manual Configuration

Example config to extract all the processed CSS in all Vue components into a single CSS file:

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: ExtractTextPlugin.extract({
              use: 'css-loader',
              fallback: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
            })
          }
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}