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