2

I'm trying to use Postcss plugins with my Vuepress custom theme, but I can't get it to work. Vuepress' documentation is extremely vague and anything from postcss-loader works.

Can someone please tell me how to use it?

Nil Vila
  • 59
  • 4

1 Answers1

2

Using postcss is fairly easy with Vuepress. You also do not need to add postcss-loader. Vuepress comes with it, as it uses postcss be default. The only thing you need is to pass configuration option. Here are steps tested to work:

Install postcss plugins you want to use (e.g. yarn add postcss-preset-env -D)

In .vuepress/config.js add this:

module.exports = {
    postcss: {
        plugins: [
            require('postcss-preset-env')({/*plugin options*/})
        ]
    }
}

This is enough to have the plugin enabled. More: https://vuepress.vuejs.org/config/#postcss

Jan Franciszek Cieślak
  • 768
  • 1
  • 8
  • 16
  • Note that the docs say that the default postcss configuration will be *overwritten* and not _extended_. Currently it seems to only include the `autoprefixer` plugin: `{ plugins: [require('autoprefixer')] }`. Is there a way to inspect the configuration that is currently used before I start adding my stuff there? – Peter T. Jan 24 '20 at 10:22
  • PS: The `autoprefixer`is added by `postcss-preset-env` in the case above, so this is fine. – Peter T. Jan 24 '20 at 10:30