How can I use precss in vue-loader at a vue-cli programme?

Question

Here is code:

postcss: [
  require('postcss-cssnext')(), // postcss is working fine if I only write this row.
  require('precss')().process({ parser: require('postcss-scss') }) // npm got error when I add this row
]

Here is error log:

Module build failed: Error: PostCSS syntaxes cannot be used as plugins. 
Instead, please use one of the syntax/parser/stringifier options as
outlined in your PostCSS runner documentation.

It seems every .vue file got same error?...

Answer 1

You cannot pass a custom parser in as a plugin. Your config should look like this:

postcss: {
  options: {
    parser: require('postcss-scss')
  },
  plugins: [
    require('postcss-cssnext')(),
    require('precss')()
  ]
}