Replace Autoprefixer browsers option to Browserslist

Question

i am using [Metronic v6.03]

I followed the Quick Start tutorial on documentation. https://keenthemes.com/metronic/?page=docs

If I give in the command ‘gulp build’ I get a message :

“Replace Autoprefixer browsers option to Browserslist config. Use browserslist key in package.json or .browserslistrc file.

Using browsers option cause some error. Browserslist config can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at: https://github.com/browserslist/browserslist#readme https://twitter.com/browserslist”

The Theme don’t compiles correctly.

NPM version : 6.9.0

Yarn version : 1.16.0

Gulp version

CLI : 2.2.0

Local version : 4.0.2

I changed the line browserlist at package.json to

"browserslist": [

"last 1 version",

"> 1%",

"maintained node versions",

"not dead"

]

and try to replace the line with :

"browserslist": [

"defaults"

]

On Linux I added a file .browserslistrc with the lines above.

Eulalia

Answer 1

The problem will be in gulpfile.js.

Look for autoprefixer(), this function will have some options passed as parameter. Remove those options. And move them to your package.json as browserslist: ["browserConfig1", "browserConfig2", "..."].

Camiecamila

as per example github.com/browserslist/browserslist-example – Maturation

Answer 2

Go to the helpers.js file and at line 128, you must change the browsers option to overrideBrowserslist. then it will work

Pteranodon

Answer 3

You can create .browserslistrc instead of editing package.json:

last 1 version >1% maintained node versions not dead `

Maneater

Answer 4

update browsers with overrideBrowserslist into autoprefixer's object in webpack.config file solves my problem.

Previously,

config.postcss = [
    autoprefixer({
        browsers: ['last 2 version']
    })
];

after updated

config.postcss = [
    autoprefixer({
        overrideBrowserslist: [
            'last 2 version',
            '> 1%'
        ]
    })
];

Necrotomy

You save my day ) – Kellar