Skip to content

Commit 5bff23b

Browse files
committed
document options
1 parent cf8f6bd commit 5bff23b

File tree

1 file changed

+31
-3
lines changed

1 file changed

+31
-3
lines changed

README.md

+31-3
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,41 @@
22

33
This is a fork based on [style-loader](https://github.com/webpack/style-loader). Similar to `style-loader`, you can chain it after `css-loader` to dynamically inject CSS into the document as style tags. However, since this is included as a dependency and used by default in `vue-loader`, in most cases you don't need to configure this loader yourself.
44

5-
### Differences from `style-loader`
5+
## Options
66

7-
#### Server-Side Rendering Support
7+
- **manualInject** (3.1.0+):
8+
9+
Type: `boolean`. When importing the style from a non-vue-file, by default the style is injected as a side effect of the import. When `manualInject` is true, the imported style object exposes a `__inject__` method, which can then be called manually at appropriate timing. If called on the server, the method expects one argument which is the `ssrContext` to attach styles to.
10+
11+
``` js
12+
import styles from 'styles.scss'
13+
14+
export default {
15+
beforeCreate() { // or create a mixin for this purpose
16+
if(styles.__inject__) {
17+
styles.__inject__(this.$ssrContext)
18+
}
19+
}
20+
21+
render() {
22+
return <div class={styles.heading}>Hello World</div>
23+
}
24+
}
25+
```
26+
27+
Note this behavior is enabled automatically when `vue-style-loader` is used on styles imported within a `*.vue` file. The option is only exposed for advanced usage.
28+
29+
- **ssrId** (3.1.0+):
30+
31+
Type: `boolean`. Add `data-vue-ssr-id` attribute to injected `<style>` tags even when not in Node.js. This can be used with pre-rendering (instead of SSR) to avoid duplicate style injection on hydration.
32+
33+
## Differences from `style-loader`
34+
35+
### Server-Side Rendering Support
836

937
When bundling with `target: 'node'`, the styles in all rendered components are collected and exposed on the Vue render context object as `context.styles`, which you can simply inline into your markup's `<head>`. If you are building a Vue SSR app, you probably should use this loader for CSS imported from JavaScript files too.
1038

11-
#### Misc
39+
### Misc
1240

1341
- Does not support url mode and reference counting mode. Also removed `singleton` and `insertAt` query options. It always automatically pick the style insertion mechanism that makes most sense. If you need these capabilities you should probably use the original `style-loader` instead.
1442

0 commit comments

Comments
 (0)