PostCSS

vue-loader处理的任何CSS输出都通过PostCSS进行管道传输以进行作用域CSS重写。您还可以向过程添加自定义PostCSS插件，例如autoprefixer 或 CSSNext。

使用配置文件

从11.0开始vue-loader支持自动加载postcss-loader支持的相同PostCss配置文件：

  • postcss.config.js
  • .postcssrc
  • postcss field in package.json

使用配置文件允许你在postcss-loader处理的普通CSS文件和*.vue文件中的CSS之间共享相同的配置，建议如此使用。

内联选项

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

在Webpack 1.x中的实例用法:

  1. // webpack.config.js
  2. module.exports = {
  3.   // other configs...
  4.   vue: {
  5.     // 使用自定义postcss插件
  6.     postcss: [require('postcss-cssnext')()]
  7.   }
  8. }

For Webpack 2.x:

  1. // webpack.config.js
  2. module.exports = {
  3.   // 其余选项...
  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处理器的选项的对象。 这在使用依赖于自定义解析器/字符串的PostCSS项目时非常有用：

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