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']
      }
    ]
  },
  // ...
}