postcss.md

PostCSS

Any CSS output processed by vue-loader is piped through PostCSS for scoped CSS rewriting. You can also add custom PostCSS plugins to the process, for example autoprefixer or CSSNext.

Example usage in Webpack 1.x:

// webpack.config.js
module.exports = {
  // other configs...
  vue: {
    // use custom postcss plugins
    postcss: [require('postcss-cssnext')()]
  }
}

For Webpack 2.x:

// webpack.config.js
module.exports = {
  // other options...
  module: {
    // module.rules is the same as module.loaders in 1.x
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        // vue-loader options goes here
        options: {
          // ...
          postcss: [require('postcss-cssnext')()]
        }
      }
    ]
  }
}

In addition to providing an Array of plugins, the postcss option also accepts:

• A function that returns an array of plugins;

• An object that contains options to be passed to the PostCSS processor. This is useful when you are using PostCSS projects that relies on custom parser/stringifiers:

  postcss: {
    plugins: [...], // list of plugins
    options: {
      parser: sugarss // use sugarss parser
    }
  }