| 1 | # vue-style-loader [](https://circleci.com/gh/vuejs/vue-loader/tree/master) [](https://www.npmjs.com/package/vue-style-loader)
|
| 2 |
|
| 3 | 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.
|
| 4 |
|
| 5 | ## Options
|
| 6 |
|
| 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
|
| 36 |
|
| 37 | 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.
|
| 38 |
|
| 39 | ### Misc
|
| 40 |
|
| 41 | - 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.
|
| 42 |
|
| 43 | - Fixed the issue that root-relative URLs are interpreted against chrome:// urls and make source map URLs work for injected `<style>` tags in Chrome.
|
| 44 |
|
| 45 | ## License
|
| 46 |
|
| 47 | MIT
|
| 48 | |
| \ | No newline at end of file |