PostCSS

由vue-loader 处理的 CSS 输出，都是通过 PostCSS 进行作用域重写，你还可以为 PostCSS 添加自定义插件，例如 autoprefixer 或者 CSSNext。

使用配置文件

vue-loader 支持通过 postcss-loader 自动加载同一个配置文件：

  • postcss.config.js
  • .postcssrc
  • package.json 中的 postcss

使用配置文件允许你在由 postcss-loader 处理的普通CSS文件和 *.vue 文件中的 CSS 之间共享相同的配置，这是推荐的做法。

配合 postcss-loader 使用

因为 vue-loader 内部通过 PostCSS 处理其样式，你只需要对标准的 CSS 文件应用 postcss-loader 即可。即便你的工程中存在 PostCSS 配置文件，也无需在样式块上指定 lang="postcss"。

有时用户可能只是出于语法高亮的目的使用 lang="postcss"。从 13.6.0 开始，如果没有 loader (通过 vue-loader 自身的 loaders 选项) 显式配置下列 PostCSS 扩展，则它们只会简单的进行 vue-loader 的默认 PostCSS 转换：

  • postcss
  • pcss
  • sugarss
  • sss

内联选项

或者，你可以使用 vue-loader 的 postcss 选项来为 .vue 文件指定配置。

示例：

  1. // webpack.config.js
  2. module.exports = {
  3.   // other options...
  4.   module: {
  5.     // `module.rules` 和 1.x 里的 `module.loaders` 相同
  6.     rules: [
  7.       {
  8.         test: /\.vue$/,
  9.         loader: 'vue-loader',
  10.         // `vue-loader` 选项放这里
  11.         options: {
  12.           // ...
  13.           postcss: [require('postcss-cssnext')()]
  14.         }
  15.       }
  16.     ]
  17.   }
  18. }

除了插件数组之外，postcss 配置选项也接受：

  • 返回插件数组的函数；

  • 要传递给 PostCSS 处理器的包含 options 的对象。当你使用的 PostCSS 项目依赖自定义 parser/stringifiers 时，这很有用：

  1. postcss: {
  2.   plugins: [...], // 插件列表
  3.   options: {
  4.     parser: 'sugarss' // 使用 sugarss 解析器
  5.   }
  6. }

禁止自动加载配置文件

在 13.6.0+ 版本中，自动加载 PostCSS 配置文件可以通过指定 postcss.useConfigFile: false 来禁用：

  1. postcss: {
  2.   useConfigFile: false,
  3.   plugins: [/* ... */],
  4.   options: {/* ... */}
  5. }

这样做会使得 *.vue 文件内部的 PostCSS 配置完全由内联配置所控制。

原文: https://vue-loader-v14.vuejs.org/zh-cn/features/postcss.html