官方文檔

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

1. 簡單的方法

// 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")
  ]
}

2. 手動配置

// 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' // <- 這是vue-loader的依賴，所以如果使用npm3，則不需要顯式安裝
            })
          }
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

3. 問題

   rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
           'scss': 'vue-style-loader!css-loader!sass-loader',
           'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',indentedSyntax',
          }，
          extractCSS: true
        }
      }
    ]

在options中配置了loaders，vue-style-loader會默認將css打包進js中！！！所以在配置提取無效