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.