Nuxt.js: how can use postcss in Global css

[didiself]

nuxt.config.js

css: [
    {src: 'normalize.css'},
    {src: '~assets/sass/common.scss', lang: 'scss'}
  ],
  build: {
    postcss: [
      require('autoprefixer')({
        browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4']
      }),
      require('postcss-pxtorem')({
        rootValue: 100,
      })
    ],
}

common.scss

body{
  display: flex;
  transition:all 1s;
  a{
    color:#ff0
  }
}

output:

body {
    display: flex;
    transition: all 1s;
}

so, how can I use autoprefixer in global scss?

also, I try to use loaders , but ERROR.

nuxt.config.js:

{
            test: /\.scss$/,
            use: [
              'vue-style-loader',
              'style-loader',
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  plugins: () => [
                  require('postcss-pxtorem')({
                    rootValue: 100,
                  }),
                  require('autoprefixer')({
                    browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4']
                  }),
                ]
              },
          },
          'sass-loader'],
      }

_{This question is available on Nuxt.js community (#c730)}

[didiself]

nuxt.config.js

[Atinux]

Hi @didiself

Here the solution: https://glitch.com/edit/#!/nuxt-postcss-global?path=nuxt.config.js:1:0
Demo: https://nuxt-postcss-global.glitch.me/

I am currently working to add postcss loader directly into nuxt.js core for global css files.

[didiself]

thanks a lot, it's work , @Atinux

[irrg]

Am I crazy for thinking this worked previously? I've been developing with the useless version 'latest' in my package.json so when I switched it to the latest alpha today (no clue what version I was working against, noob mistake) my global css postcss stopped working.

[doriandrn]

@irrg Had the same issue. Made it work like this:

... extend build settings:

let cssLoader = config.module.rules.find((loader) => loader.test.toString() === '/\\.css$/')
cssLoader.use.splice(2, 0, {
  loader: 'postcss-loader',
  options: {...}
})

Please note you'll have to move your postcss configuration to postcss.config.js in your root folder. More info about this here: https://github.com/postcss/postcss-loader

[irrg]

@doriandrn I got it to work, but thanks for those pointers either way. I'm mostly trying to figure out how to keep track of BC-breaking changes, which this seems to be. When'd this behavior change?

[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.