vue服務端渲染提取css

vue服務端渲染，提取css單獨打包的好處就不說了，在這里主要說的是抽取css的方法

要從 *.vue 文件中提取 CSS，可以使用 vue-loader 的 extractCSS 選項（需要 vue-loader12.0.0+）

// webpack.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin')

// CSS 提取應該只用於生產環境
// 這樣我們在開發過程中仍然可以熱重載
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // enable CSS extraction
          extractCSS: isProduction
        }
      },
      // ...
    ]
  },
  plugins: isProduction
    // 確保添加了此插件！
    ? [new ExtractTextPlugin({ filename: 'common.[chunkhash].css' })]
    : []
}

　　

請注意，上述配置僅適用於 *.vue 文件中的樣式，然而你也可以使用 <style src="./foo.css"> 將外部 CSS 導入 Vue 組件。

如果你想從 JavaScript 中導入 CSS，例如，import 'foo.css'，你需要配置合適的 loader：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        // 重要：使用 vue-style-loader 替代 style-loader
        use: isProduction
          ? ExtractTextPlugin.extract({
              use: 'css-loader',
              fallback: 'vue-style-loader'
            })
          : ['vue-style-loader', 'css-loader']
      }
    ]
  },
  // ...
}