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;).

Answer 1

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