Skip to content

Commit 3558dbb

Browse files
committed
update readme
1 parent 9985f1f commit 3558dbb

File tree

2 files changed

+34
-16
lines changed

2 files changed

+34
-16
lines changed

README.md

+33-15
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export default {
3333
- [Basic Usage](#basic-usage)
3434
- [ES2015 by Default](#es2015-by-default)
3535
- [CSS Pre-Processors](#css-pre-processors)
36+
- [Autoprefixing](#autoprefixing)
3637
- [Template Pre-Processors](#template-pre-processors)
3738
- [Style Imports](#style-imports)
3839
- [Asset URL Handling](#asset-url-handling)
@@ -132,6 +133,23 @@ You can also include Webpack loader queries in the `lang` attribute:
132133
</style>
133134
```
134135

136+
## Autoprefixing
137+
138+
Starting in 6.0.0, Any CSS output via `vue-loader` is piped through [autoprefixer](https://github.com/postcss/autoprefixer) by default. You can customize this behavior in the `vue` section of your webpack config:
139+
140+
``` js
141+
// webpack.config.js
142+
module.exports = {
143+
// other configs...
144+
vue: {
145+
// disable autoprefixing
146+
autoprefixer: false,
147+
// OR: custom options
148+
autoprefixer: { browsers: ['last 2 versions'] }
149+
}
150+
}
151+
```
152+
135153
## Template Pre-Processors
136154

137155
For template pre-processors, you should install `template-html-loader` plus the raw templating engine. For example to use `jade`, you will need to install both `template-html-loader` and `jade` instead of `jade-loader`.
@@ -251,19 +269,17 @@ the `lang` attribute, but you can configure which loader should be used.
251269
#### Example: Use CoffeeScript for all `<script>` tags
252270

253271
``` js
254-
var vue = require('vue-loader')
255-
256272
module.exports = {
257273
// entry, output...
258274
module: {
259-
loaders: [
260-
{
261-
test: /\.vue$/,
262-
loader: vue.withLoaders({
263-
js: 'coffee'
264-
})
265-
}
266-
]
275+
loaders: [{
276+
test: /\.vue$/, loader: 'vue'
277+
}]
278+
},
279+
vue: {
280+
loaders: {
281+
js: 'coffee'
282+
}
267283
},
268284
devtool: '#source-map'
269285
}
@@ -276,20 +292,22 @@ use this Webpack config:
276292

277293
``` js
278294
var ExtractTextPlugin = require("extract-text-webpack-plugin");
279-
var vue = require("vue-loader");
280295

281296
module.exports = {
282297
// entry, output...
283298
module: {
284299
loaders: [
285300
{
286-
test: /\.vue$/, loader: vue.withLoaders({
287-
css: ExtractTextPlugin.extract("css"),
288-
stylus: ExtractTextPlugin.extract("css!stylus")
289-
})
301+
test: /\.vue$/, loader: 'vue'
290302
},
291303
]
292304
},
305+
vue: {
306+
loaders: {
307+
css: ExtractTextPlugin.extract("css"),
308+
stylus: ExtractTextPlugin.extract("css!stylus")
309+
}
310+
},
293311
plugins: [
294312
new ExtractTextPlugin("[name].css")
295313
]

lib/style-rewriter.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ module.exports = function (css) {
2424

2525
var query = loaderUtils.parseQuery(this.query)
2626
var options = this.options.vue || {}
27-
var autoprefixOptions = options.autoprefix
27+
var autoprefixOptions = options.autoprefixer
2828

2929
var processors = []
3030
if (query.scoped) {

0 commit comments

Comments
 (0)