CSS 提取

提示

请只在生产环境下使用 CSS 提取，这将便于你在开发环境下进行热重载。

webpack 4

  1. npm install -D mini-css-extract-plugin
  1. // webpack.config.js
  2. var MiniCssExtractPlugin = require('mini-css-extract-plugin')
  4. module.exports = {
  5.   // 其它选项...
  6.   module: {
  7.     rules: [
  8.       // ... 忽略其它规则
  9.       {
  10.         test: /\.css$/,
  11.         use: [
  12.           process.env.NODE_ENV !== 'production'
  13.             ? 'vue-style-loader'
  14.             : MiniCssExtractPlugin.loader,
  15.           'css-loader'
  16.         ]
  17.       }
  18.     ]
  19.   },
  20.   plugins: [
  21.     // ... 忽略 vue-loader 插件
  22.     new MiniCssExtractPlugin({
  23.       filename: style.css
  24.     })
  25.   ]
  26. }

你还可以查阅 mini-css-extract-plugin 文档。

webpack 3

  1. npm install -D extract-text-webpack-plugin
  1. // webpack.config.js
  2. var ExtractTextPlugin = require("extract-text-webpack-plugin")
  4. module.exports = {
  5.   // 其它选项...
  6.   module: {
  7.     rules: [
  8.       // ...其它规则忽略
  9.       {
  10.         test: /\.css$/,
  11.         loader: ExtractTextPlugin.extract({
  12.           use: 'css-loader',
  13.           fallback: 'vue-style-loader'
  14.         })
  15.       }
  16.     ]
  17.   },
  18.   plugins: [
  19.     // ...vue-loader 插件忽略
  20.     new ExtractTextPlugin("style.css")
  21.   ]
  22. }

你也可以查阅 extract-text-webpack-plugin 文档。

原文: https://vue-loader.vuejs.org/zh/guide/extract-css.html