Correct way to add PostCSS support to Vue cli 3

Question

How do we add PostCSS support to Vue cli 3 (I'm using beta 7)? Is there a plugin for it? Its not supported out of the box.

When I tried to import like this

import './index.pcss'

using the default cli generated project

./src/index.pcss
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sofa {
|   font-family: "sofachrome", serif;
| }
 @ ./src/main.js 5:0-22

my postcssrc.js:

module.exports =
  {
    'plugins': {
      'autoprefixer': {},
      'postcss-smart-import': {},
      'postcss-custom-properties': {},
      'postcss-nested': {}
    }
  }

Answer 1

Just use the .css extension, not .pcss. If you must use .pcss you'll have to configure that in webpack. As for how to properly tap into that rule to do that I'd need to research a bit. Though, I think just using .css is a clear win.

Answer 2

PostCSS (as pointed out by Bill and Yuriy) works by default, but the Webpack loader is only configured for .css extensions. To modify it, update your vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('pcss')
      .use('postcss-loader')
      .tap(options =>
        merge(options, {
          sourceMap: false,
        })
      )
  }
}

Modify the example according to your needs. Read more in vue-cli docs