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.

Using a Config File

vue-loader supports auto-loading the same PostCss config files supported by postcss-loader:

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

Using a config file allows you to share the same config between your normal CSS files processed by postcss-loader and the CSS inside *.vue files, and is recommended.

Using with postcss-loader

Since vue-loader handles PostCSS on its styles internally, you only need to apply postcss-loader to standalone CSS files. There's no need to specify lang="postcss" on a style block if there is a PostCSS config file in your project.

Sometimes the user may want to use lang="postcss" only for syntax highlighting purposes. Starting in 13.6.0, if no loader has been explicitly configured for the following common PostCSS extensions (via vue-loader's own loaders option), they will simply go through vue-loader's default PostCSS transforms:

  • postcss
  • pcss
  • sugarss
  • sss

Inline Options

Alternatively, you can specify PostCSS config specifically for *.vue files using the postcss option for vue-loader.


// 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

Disabling Auto Config File Loading

In 13.6.0+, auto PostCSS config file loading can be disabled by specifying postcss.useConfigFile: false:

postcss: {
  useConfigFile: false,
  plugins: [/* ... */],
  options: {/* ... */}

This allows the PostCSS configuration inside *.vue files to be entirely controlled by the inline config.

results matching ""

    No results matching ""