You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
3.4 KiB
138 lines
3.4 KiB
# autoprefixer-loader [](https://travis-ci.org/passy/autoprefixer-loader) [](https://gemnasium.com/passy/autoprefixer-loader) [](https://codeclimate.com/github/passy/autoprefixer-loader)
|
|
|
|
An [autoprefixer](https://github.com/ai/autoprefixer) loader for [webpack](https://github.com/webpack/webpack).
|
|
|
|
> ### :warning: This module is deprecated. [Autoprefixer official page](https://github.com/postcss/autoprefixer#webpack) recommends using [`postcss-loader`](https://github.com/postcss/postcss-loader) instead.
|
|
|
|
## Usage
|
|
|
|
```js
|
|
var css = require('!raw!autoprefixer!./file.css'); // Just the CSS
|
|
var css = require('!css!autoprefixer!./file.css'); // CSS with processed url(...)s
|
|
```
|
|
|
|
See [css-loader](https://github.com/webpack/css-loader) to see the effect of processed `url(...)`s.
|
|
|
|
Or within the webpack config:
|
|
|
|
```js
|
|
module: {
|
|
loaders: [{
|
|
test: /\.css$/,
|
|
loader: 'css-loader!autoprefixer-loader?browsers=last 2 versions'
|
|
}]
|
|
}
|
|
```
|
|
|
|
Then you can: `var css = require('./file.css');`.
|
|
|
|
Use in tandem with the [style-loader](https://github.com/webpack/style-loader) to add the css rules to your `document`:
|
|
|
|
```js
|
|
module: {
|
|
loaders: [{
|
|
test: /\.css/,
|
|
loader: 'style-loader!css-loader!autoprefixer-loader'
|
|
}]
|
|
}
|
|
```
|
|
|
|
and then `require('./file.css');` will compile and add the CSS to your page.
|
|
|
|
## Options
|
|
|
|
### `browsers`
|
|
|
|
Specify a single browser to support. [Read
|
|
more](https://github.com/postcss/autoprefixer#browsers)
|
|
|
|
```js
|
|
loaders: [{
|
|
loader: 'css-loader!autoprefixer-loader?browsers=last 2 version',
|
|
...
|
|
}]
|
|
```
|
|
|
|
For a list of browsers use JSON syntax.
|
|
```js
|
|
loaders: [{
|
|
loader: 'css-loader!autoprefixer-loader?{browsers:["last 2 version", "Firefox 15"]}',
|
|
...
|
|
}]
|
|
```
|
|
|
|
### `cascade`
|
|
|
|
*Default: true*
|
|
|
|
When disabled, autoprefixer creates no visual cascade for the generated
|
|
prefixes.
|
|
[Read more](https://github.com/postcss/autoprefixer#visual-cascade)
|
|
|
|
```js
|
|
loaders: [{
|
|
loader: 'css-loader!autoprefixer-loader?cascade=false',
|
|
...
|
|
}]
|
|
```
|
|
|
|
### `safe`
|
|
|
|
*Default: false*
|
|
|
|
When enabled, autoprefixer will attempt to parse invalid CSS. [Read
|
|
more](https://github.com/postcss/autoprefixer-core#safe-mode)
|
|
|
|
```js
|
|
loaders: [{
|
|
loader: 'css-loader!autoprefixer-loader?safe=true',
|
|
...
|
|
}]
|
|
```
|
|
|
|
### `add`
|
|
|
|
*Default: true*
|
|
|
|
While disabled, autoprefixer will not add any new prefixes to your code. [Read
|
|
more](https://github.com/postcss/autoprefixer#usage)
|
|
|
|
```js
|
|
loaders: [{
|
|
loader: 'css-loader!autoprefixer-loader?add=false',
|
|
...
|
|
}]
|
|
```
|
|
|
|
### `remove`
|
|
|
|
*Default: true*
|
|
|
|
Whether or not autoprefixer should automatically remove outdated prefixes. [Read
|
|
more](https://github.com/postcss/autoprefixer#usage)
|
|
|
|
```js
|
|
loaders: [{
|
|
loader: 'css-loader!autoprefixer-loader?remove=false',
|
|
...
|
|
}]
|
|
```
|
|
|
|
## Install
|
|
|
|
`npm install autoprefixer-loader --save-dev`
|
|
|
|
## Contributing
|
|
In lieu of a formal styleguide, take care to maintain the existing coding style.
|
|
|
|
## Release History
|
|
* 3.1.0 - Upgrade dependencies, move to autoprefixer (no longer -core)
|
|
* 3.0.0 - Upgrade to autoprefixer-core 6.0
|
|
* 2.1.0 - Add `add`, `remove` options, bump autoprefixer-core
|
|
* 2.0.0 - Updated autoprefixer + postcss
|
|
* 1.2.0 - Added support for existing sourcemaps from earlier in the chain
|
|
* 0.1.0 - Initial release
|
|
|
|
## License
|
|
Licensed under the MIT license.
|