提取 CSS 到单个文件

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

简单的方法

requires vue-loader@^12.0.0 and webpack@^2.0.0
  1. // webpack.config.js
  2. var ExtractTextPlugin = require("extract-text-webpack-plugin")
  4. module.exports = {
  5.   // other options...
  6.   module: {
  7.     rules: [
  8.       {
  9.         test: /\.vue$/,
  10.         loader: 'vue-loader',
  11.         options: {
  12.           extractCSS: true
  13.         }
  14.       }
  15.     ]
  16.   },
  17.   plugins: [
  18.     new ExtractTextPlugin("style.css")
  19.   ]
  20. }

上述内容将自动处理 *.vue 文件内的 <style> 提取，并与大多数预处理器一样开箱即用。

注意这只是提取 *.vue 文件 - 但在 JavaScript 中导入的 CSS 仍然需要单独配置。

手动配置

将所有 Vue 组件中的所有已处理的 CSS 提取为单个 CSS 文件配置示例：

  1. // webpack.config.js
  2. var ExtractTextPlugin = require("extract-text-webpack-plugin")
  4. module.exports = {
  5.   // other options...
  6.   module: {
  7.     rules: [
  8.       {
  9.         test: /\.vue$/,
  10.         loader: 'vue-loader',
  11.         options: {
  12.           loaders: {
  13.             css: ExtractTextPlugin.extract({
  14.               use: 'css-loader',
  15.               fallback: 'vue-style-loader' // <- 这是vue-loader的依赖，所以如果使用npm3，则不需要显式安装
  16.             })
  17.           }
  18.         }
  19.       }
  20.     ]
  21.   },
  22.   plugins: [
  23.     new ExtractTextPlugin("style.css")
  24.   ]
  25. }

原文: https://vue-loader-v14.vuejs.org/zh-cn/configurations/extract-css.html