CODEWITHSUNDEEP
webpackautoprefixer
s-leg3ndz
s-leg3ndz

Reputation: 3528

webpack autoprefixer load browserslistrc

I would like use .browserslistrc file for load my browsers config with webpack (css-loader create conflict with -webkit-flexbox prefix.

So, i've create my .browserslistrc file and test with my package.json, but my config isn't load :

# Browsers that we support

Last 10 versions

My package.json :

"devDependencies": {
    "autoprefixer": "^6.4.1",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-stage-2": "^6.13.0",
    "browser-sync": "^2.14.3",
    "css-loader": "^0.24.0",
    "css-mqpacker": "^5.0.1",
    "eslint": "^3.18.0",
    "eslint-loader": "^1.6.3",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "node-sass": "^3.8.0",
    "postcss-loader": "^0.11.1",
    "progress-bar-webpack-plugin": "^1.9.0",
    "sass-loader": "^4.0.1",
    "script-loader": "^0.7.0",
    "style-loader": "^0.13.1",
    "webpack": "^2.0.0",
    "webpack-notifier": "^1.5.0"
},

Anyone have already add .browserslistrc file on webpack config ?

Upvotes: 2

Views: 2092

Answers (1)

Matt
Matt

Reputation: 10823

I switched to "autoprefixer": "^7.1.1" in my package.json and used the inline require form in my Webpack config (1.x):

...

postcss() {
  return [
    require('autoprefixer'),
  ];
},

the .browserslistrc was picked correctly.

Before, on version 6.x, I had to specify it manually in my webpack config file for autoprefixer, the file was not picked correctly:

autoprefixer({
  browsers: [
    '>1%',
    'last 4 versions',
    'Firefox ESR',
    'not ie < 9', // React doesn't support IE8 anyway
  ]
}),

I think also the browsers option in package.json would have worked but I never tested that.

Upvotes: 1

Related Questions