Skip to content

Commit 5c9b80c

Browse files
committed
update docs
1 parent a5f34dd commit 5c9b80c

File tree

2 files changed

+98
-3
lines changed

2 files changed

+98
-3
lines changed

docs/en/configurations/extract-css.md

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,46 @@
11
# Extracting CSS into a Single File
22

3+
``` bash
4+
npm install extract-text-webpack-plugin --save-dev
5+
```
6+
7+
## The Easy Way
8+
9+
> requires vue-loader@^12.0.0 and webpack@^2.0.0
10+
11+
``` js
12+
// webpack.config.js
13+
var ExtractTextPlugin = require("extract-text-webpack-plugin")
14+
15+
module.exports = {
16+
// other options...
17+
module: {
18+
rules: [
19+
{
20+
test: /\.vue$/,
21+
loader: 'vue-loader',
22+
options: {
23+
extractCSS: true
24+
}
25+
}
26+
]
27+
},
28+
plugins: [
29+
new ExtractTextPlugin("style.css")
30+
]
31+
}
32+
```
33+
34+
The above will automatically handle extraction for `<style>` inside `*.vue` files and works with most pre-processors out of the box.
35+
36+
Note this only extracts `*.vue` files though - CSS imported in JavaScript still needs to be configured separately.
37+
38+
## Manual Configuration
39+
340
Example config to extract all the processed CSS in all Vue components into a single CSS file:
441

542
### Webpack 2.x
643

7-
``` bash
8-
npm install extract-text-webpack-plugin --save-dev
9-
```
1044

1145
``` js
1246
// webpack.config.js

docs/en/options.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,3 +185,64 @@ module.exports = {
185185
]
186186
}
187187
```
188+
189+
### extractCSS
190+
191+
> New in 12.0.0
192+
193+
Automatically extracts the CSS using `extract-text-webpack-plugin`. Works for most pre-processors out of the box, and handles minification in production as well.
194+
195+
The value passed in can be `true`, or an instance of the plugin (so that you can use multiple instances of the extract plugin for multiple extracted files).
196+
197+
This should be only used in production so that hot-reload works during development.
198+
199+
Example:
200+
201+
``` js
202+
// webpack.config.js
203+
var ExtractTextPlugin = require("extract-text-webpack-plugin")
204+
205+
module.exports = {
206+
// other options...
207+
module: {
208+
rules: [
209+
{
210+
test: /\.vue$/,
211+
loader: 'vue-loader',
212+
options: {
213+
extractCSS: true
214+
}
215+
}
216+
]
217+
},
218+
plugins: [
219+
new ExtractTextPlugin("style.css")
220+
]
221+
}
222+
```
223+
224+
Or passing in an instance of the plugin:
225+
226+
``` js
227+
// webpack.config.js
228+
var ExtractTextPlugin = require("extract-text-webpack-plugin")
229+
var plugin = new ExtractTextPlugin("style.css")
230+
231+
module.exports = {
232+
// other options...
233+
module: {
234+
rules: [
235+
{
236+
test: /\.vue$/,
237+
loader: 'vue-loader',
238+
options: {
239+
extractCSS: plugin
240+
}
241+
}
242+
]
243+
},
244+
plugins: [
245+
plugin
246+
]
247+
}
248+
```

0 commit comments

Comments
 (0)