Skip to content

Commit

Permalink
Allow custom autoprefixer config - resolves #1428
Browse files Browse the repository at this point in the history
  • Loading branch information
JeffreyWay committed Jan 23, 2018
1 parent ce82995 commit bd3dc42
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 4 deletions.
22 changes: 21 additions & 1 deletion docs/css-preprocessors.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,27 @@ With this addition to your `webpack.mix.js` file, we will no longer match `url()
### PostCSS Plugins

By default, Mix will pipe all of your CSS through the popular [Autoprefixer PostCSS plugin](https://github.com/postcss/autoprefixer). As a result, you are free to use the latest CSS 3 syntax, with the understanding that we'll apply any necessary browser-prefixes automatically.
By default, Mix will pipe all of your CSS through the popular [Autoprefixer PostCSS plugin](https://github.com/postcss/autoprefixer). As a result, you are free to use the latest CSS 3 syntax with the understanding that we'll apply any necessary browser-prefixes automatically. The default settings should be fine in most scenarios, however, if you need to tweak the underlying Autoprefixer configuration, here's how:

```js
mix.sass('resources/assets/sass/app.scss', 'public/css')
.options({
autoprefixer: {
options: {
browsers: [
'last 6 versions',
]
}
}
});
```

Additionally, if you wish to disable it entirely - or depend upon a PostCSS plugin that already includes Autoprefixer:

```js
mix.sass('resources/assets/sass/app.scss', 'public/css')
.options({ autoprefixer: false });
```

It's possible, however, that you'd like to apply [additional PostCSS plugins](https://github.com/postcss/postcss/blob/master/docs/plugins.md) to your build. No problem. Simply install the desired plugin through NPM, and then reference it in your `webpack.mix.js` file, like so:

Expand Down
4 changes: 2 additions & 2 deletions src/builder/webpack-rules.js
Original file line number Diff line number Diff line change
Expand Up @@ -159,8 +159,8 @@ module.exports = function () {
plugins = preprocessor.postCssPlugins;
}

if (Config.autoprefixer) {
plugins.push(require('autoprefixer'));
if (Config.autoprefixer && Config.autoprefixer.enabled) {
plugins.push(require('autoprefixer')(Config.autoprefixer.options));
}

return plugins;
Expand Down
5 changes: 4 additions & 1 deletion src/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,10 @@ module.exports = function () {
*
* @type {Boolean}
*/
autoprefixer: true,
autoprefixer: {
enabled: true,
options: {}
},

/**
* Determine if Mix should remove unused selectors from your CSS bundle.
Expand Down

0 comments on commit bd3dc42

Please sign in to comment.