Skip to content

Commit

Permalink
en: add extra options example for extractCSS (#492)
Browse files Browse the repository at this point in the history
Co-authored-by: Debbie O'Brien <debs-obrien@users.noreply.github.com>
  • Loading branch information
tim-yao and debs-obrien committed Aug 10, 2020
1 parent cde3166 commit 850919a
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 2 deletions.
16 changes: 15 additions & 1 deletion content/en/api/configuration-build.md
Original file line number Diff line number Diff line change
Expand Up @@ -201,11 +201,25 @@ export default {

> Enables Common CSS Extraction using Vue Server Renderer [guidelines](https://ssr.vuejs.org/en/css.html).
- Type: `Boolean`
- Type: `Boolean` or `Object`
- Default: `false`

Using [`extract-css-chunks-webpack-plugin`](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/) under the hood, all your CSS will be extracted into separate files, usually one per component. This allows caching your CSS and JavaScript separately and is worth a try in case you have a lot of global or shared CSS.

Example (`nuxt.config.js`):

```js
export default {
build: {
extractCSS: true,
// or
extractCSS: {
ignoreOrder: true
}
}
}
```

<div class="Alert Alert--teal">

**Note:** There was a bug prior to Vue 2.5.18 that removed critical CSS imports when using this options.
Expand Down
16 changes: 15 additions & 1 deletion content/en/guides/configuration-glossary/configuration-build.md
Original file line number Diff line number Diff line change
Expand Up @@ -196,11 +196,25 @@ export default {

> Enables Common CSS Extraction using Vue Server Renderer [guidelines](https://ssr.vuejs.org/en/css.html).
- Type: `Boolean`
- Type: `Boolean` or `Object`
- Default: `false`

Using [`extract-css-chunks-webpack-plugin`](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/) under the hood, all your CSS will be extracted into separate files, usually one per component. This allows caching your CSS and JavaScript separately and is worth a try in case you have a lot of global or shared CSS.

Example (`nuxt.config.js`):

```js
export default {
build: {
extractCSS: true,
// or
extractCSS: {
ignoreOrder: true
}
}
}
```

<base-alert type="info">

**Note:** There was a bug prior to Vue 2.5.18 that removed critical CSS imports when using this options.
Expand Down

0 comments on commit 850919a

Please sign in to comment.