Nuxt.js: PostCSS plugins don't do anything

[benjarwar]

I'm trying to add some PostCSS plugins. Currently trying to get pxtorem working, but my compiled CSS is unchanged. Here's the relevant config:

module.exports = {
  css: [
    { src: '~assets/scss/main.scss', lang: 'scss' }
  ],

  build: {
    postcss: [
      require('postcss-pxtorem')({
        propList: ['*']
      })
    ]
  }
}

_{This bug report is available on Nuxt.js community (#c966)}

[damian-nz]

@benjarwar this is similar to my issue. I found that you need to overwrite the default Sass loader like this but then that causes another issue (which is what my issue is about).

[casio]

@benjarwar I was stumbling into the same - postcss plugins configured just fine in nuxt.config.js, but my css was not getting processed whatsoever. I was using nuxt.config.jss css field to specify my global css file.

However, I got it to work now by still using the config file to set postcss options, but to include my css from ie pages/index.vue using just the style element(without lang attr!).

Kinda like this

# pages/index.vue

...

<style>
@import "../styles/index.css";
</style>

...

# nuxt.config.js

...

build: {
    postcss: [
      require('postcss-easy-import')(),
      require('postcss-custom-properties')(),
      require('postcss-calc')(),
      require('postcss-custom-media')(),
    ]
  }

...

You probably could use a layout file to mimic the global behavior, as well(not tested).

Hope that helps!

btw in your above post, you got a typo: lang: 'scss'?!

[didiself]

Is that your want use scss in global css with post-css??

[benjarwar]

@casio @didiself that is the use case. Looking to use SASS for pre-processing, then using postCSS for autoprefixing, pxtorem, etc. Bad practice?

[didiself]

@benjarwar of course not.

this is my config.

sass-resources-loader & postcss-loader can use in vue & scss.

but need add a postcss.config.js in root dir, for the line 42.
// I can't find a better way to reuse the postcss config in nuxt.config.js for now.

last, sometimes run dev will console some error about scss, but pages still normal.

hope somebody can tell me why. LOL

[piyushchauhan2011]

Does adding postcss-scss scss will work ? @didiself

[didiself]

of course @piyushchauhan2011

[benjarwar]

Thanks for the advice, folks!

@didiself I'm trying your solution, but the compiled CSS still seems unaffected.

Here's my nuxt.config.js:

const pxtorem = require('postcss-pxtorem');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const { resolve } = require('path');

const isVueRule = (rule) => {
  return rule.test.toString() === '/\\.vue$/'
}

const isSCSSRule = (rule) => {
  return rule.test.toString() === '/\\.scss$/'
}

const sassResourcesLoader = {
  loader: 'sass-resources-loader',
  options: {
    resources: resolve(__dirname, './assets/scss/main.scss')
  }
}

module.exports = {
  css: [
    { src: '~assets/scss/main.scss', lang: 'scss' }
  ],

  build: {
    loaders: [
      {
        test: /\.md$/,
        loaders: ['markdown-with-front-matter-loader']
      },
      {
        test: /\.svg$/,
        loaders: ['svg-sprite-loader']
      },
      {
        test: /\.(woff2?)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 1000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ],

    plugins: [
      new StyleLintPlugin({
        files: 'assets/scss/**/*.scss'
      })
    ],

    postcss: [
      require('autoprefixer')({
        browsers: ['last 2 versions']
      }),
      require('postcss-pxtorem')({
        propList: ['*']
      })
    ],

    vendor: [
      'babel-polyfill'
    ],

    /*
    ** Extend Nuxt Webpack config
    */
    extend (config, ctx) {
      if (ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }

      config.module.rules.forEach((rule) => {
        if (isVueRule(rule)) {
          rule.query.loaders.scss.push(sassResourcesLoader)
        } else if (isSCSSRule(rule)) {
          rule.use.push('postcss-loader', sassResourcesLoader)
          console.log(rule)
        }
      })
    }
  }
}

And here's postcss.config.js:

module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: ['last 2 versions']
    }),
    require('postcss-pxtorem')({
      propList: ['*']
    })
  ]
}

No errors in the console. When I log out the rule in the else if (isSCSSRule(rule)) block, it looks like the postcss-loader has been properly added:

{ test: /\.scss$/,
  use: 
   [ 'vue-style-loader?sourceMap',
     'css-loader?sourceMap',
     'sass-loader?sourceMap',
     'postcss-loader',
     { loader: 'sass-resources-loader', options: [Object] } ] }

RE @piyushchauhan2011's suggestion of postcss-scss, I'm not sure how to implement, since that doesn't compile the SCSS.

[piyushchauhan2011]

I also haven't tried integration of postcss-scss, having problems with postcss with scss hence currently we shifted to postcss only. Apparently the editor support is not quite good, and keep getting warnings related to sourceMap if use lang="postcss" in .vue files. Not sure how to remove them. @benjarwar

Will try today, let's see if the above works for me too!

[benjarwar]

Thanks, @piyushchauhan2011, keep me posted.

@Atinux saw your comment over on @damian-nz's similar Issue. Any thoughts? I think I'm applying your recommended config correctly, but postCSS doesn't affect the output of compiled global SCSS files (see configs above).

[damian-nz]

@benjarwar @Atinux I have been AFK. I too have attempted to apply the same config as was suggested and also cannot get postCSS to do anything.

My issue has been closed but I will follow this thread along now that we have the same problem and now that this one has been labeled as a bug

[pi0]

PostCSS support is improved a lot. Coming with rc5 :) Also while the old array style will be still supported, here is recommended usage: (Another option is using postcss.config.js which will be automatically detected if exists in your project)

  postcss: {
      'postcss-pxtorem': { propList: ['*'] }
   }

Will update docs after release too.

[Atinux]

Please upgrade to rc5 :)

https://github.com/nuxt/nuxt.js/releases/tag/v1.0.0-rc5

[benjarwar]

Thanks, @pi0 and @Atinux!

[rlam3]

I'm trying to use rupture and lost with stylus in my vue files. I've already installed the node_modules and added them to my nuxt.config.js file but it seems like when I try to use rupture or lost, it doesn't understand it....

https://github.com/jescalan/rupture
https://github.com/peterramsing/lost#vertical-grids

Are there some external configuration from the nuxt.config.js file that I need to do for them to work properly? Thanks!

  /*
  ** PostCSS Plugins
  */
  postcss: [
    require('lost')(),
    require('rupture')(),
    require('axis')(),
    require('postcss-nested')
  ]

[eybarta]

@rlam3 did you get rupture to work?
When I added it to postcss: [] as you did, I'm getting a build error,
something about style.include.. ?!

[rlam3]

@eybarta no i didn't I'm still trying to figure out nuxt plugins as well... i opted to use css media as a workaround for the time being. if you find anything please let me know as well. :)

[lock[bot]]

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.