Static GitHub Issues

[846] how can use postcss in Global css

prev: Importing css files and console.log the var return empty object
next: I can't to use frola editor

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'],
      }

image

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c730">#c730</a>)</em></sub></div>