How to add postcss plugins

[PatrikLythell]

I ended up adding them to the postcss array in vue-loader.config.js because I couldn't get it to work.

Is there a better way or should we add a hook to the postcss array?

_{This feature request is available on Nuxt.js community (#c3)}

[Atinux]

Can you post your postcss config?

I may add build.postcss option in nuxt.config.js

[PatrikLythell]

Just added postcss-cssnext to vue-loader.config.js inside my nuxt package for giggles. That made the build complain about double autoprefixer though (think it's included in cssnext).

Think build.postcss in nuxt.config.js would be sweet 👍

'use strict'

module.exports = function () {
  let config = {
    postcss: [
      require('postcss-cssnext')(),
      require('autoprefixer')({
        browsers: ['last 3 versions']
      })
    ],
…

[Atinux]

This option has been added in v0.6.7

Thank you @PatrikLythell for using Nuxt.js 😄

[qur2]

Just for the record, since I spent few hours looking for that, here is the nuxt.config.js that worked for me:

module.exports = {
  build: {
    postcss: [
      require('postcss-nested')(),
      require('postcss-responsive-type')(),
      require('postcss-hexrgba')(),
    ]
  }
}

[tiagomatosweb]

That's cool, but seems that any scss file included by CSS array in the nuxt.config.js files is not prefixed.

css: [
      { src: '~assets/scss/app.scss', lang: 'scss' },
],

My workaround was import the scss file in the layout vue file, like so

<style lang="scss"> @import "~assets/scss/app.scss"; </style>

Any other better approach?

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.