How to make autoprefixer work with .vue files in Nuxt project?

Question

I am building a nuxt application and using scss for styling.

I have installed node-sass and sass-loader & now am able to load external scss files. This global file is being processed by autoprefixer (for eg.: If I do display: flex, it automatically adds display: -webkit-box; display: -ms-flexbox;),

I have added these lines from doc to my nuxt.config.js file and have installed 4 pakcages as mentioned below (postcss-url, postcss-nested etc..)

postcss: {
            plugins: {
                'postcss-url': false,
                'postcss-nested': {},
                'postcss-responsive-type': {},
                'postcss-hexrgba': {}
            },
            preset: {
                autoprefixer: {
                    grid: true,
                    flexbox: true
                }
            }
        },

I expect my inline stylle with lang="scss" should also work in a same way as the global scss file(for eg.: If I do display: flex, it automatically adds display: -webkit-box; display: -ms-flexbox;).

score 5 · Answer 1 · edited Sep 02 '20 at 08:27

5

You can add in package.json after devDependencies - "browserslist": "cover 99.5%"

edited Sep 02 '20 at 08:27

Eric Aya

69,473
35
181
253

answered Sep 02 '20 at 05:41

Stanislav Posokhov

71
1
4

score 1 · Answer 2 · answered Jan 13 '21 at 15:48

1

maybe this will help you

preset: {
    autoprefixer: {
      flexbox: true,
      grid: true,
      overrideBrowserslist: ['last 3 versions', '> 1%', 'ie 8', 'ie 7'],
    },
  },

answered Jan 13 '21 at 15:48

Artur Rudyuk

11
1

score 0 · Answer 3 · answered Dec 22 '19 at 21:10

0

Autoprefixer should be enabled by default in Nuxt. If you want, you can adjust the settings. More info here: https://nuxtjs.org/api/configuration-build/#postcss

answered Dec 22 '19 at 21:10

Vasilis Tsirimokos

205
2
10

1

It does works as separate scss file, but I would like to know how inline scss style work? I mean how autoprefixer can work inline also in single-file component. – Ravi Wadhwani Dec 27 '19 at 16:42

score 0 · Answer 4 · answered Dec 05 '21 at 13:21

0

Autoprefixer should be enabled by default in Nuxt I have used in my project and resolved for IE9 and above version

build: {
    postcss: [
      require('autoprefixer')({
        overrideBrowserslist: ['cover 99.5%', 'not IE < 9']
      })
    ],
}

answered Dec 05 '21 at 13:21

Mehrdad Dehghanzadeh

1
1

How to make autoprefixer work with .vue files in Nuxt project?

4 Answers4