vue服务端渲染，提取css单独打包的好处就不说了，在这里主要说的是抽取css的方法
要从 *.vue 文件中提取 CSS，可以使用 vue-loader 的 extractCSS 选项（需要 vue-loader12.0.0+）
// webpack.config.jsconst 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‘] ?????} ???] ?}, ?// ...}vue服务端渲染提取css
原文地址：https://www.cnblogs.com/wing-sky/p/9642271.html