{"id":13563691,"url":"https://github.com/vuejs/vue-style-loader","last_synced_at":"2026-01-12T01:05:50.955Z","repository":{"id":52670510,"uuid":"49083565","full_name":"vuejs/vue-style-loader","owner":"vuejs","description":"💅 vue style loader module for webpack","archived":false,"fork":true,"pushed_at":"2021-04-21T16:10:31.000Z","size":185,"stargazers_count":226,"open_issues_count":25,"forks_count":68,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-10-30T00:55:17.163Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"webpack-contrib/style-loader","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vuejs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-05T18:10:07.000Z","updated_at":"2024-07-08T18:02:46.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/vuejs/vue-style-loader","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuejs%2Fvue-style-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuejs%2Fvue-style-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuejs%2Fvue-style-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuejs%2Fvue-style-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vuejs","download_url":"https://codeload.github.com/vuejs/vue-style-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234702053,"owners_count":18873823,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T13:01:22.318Z","updated_at":"2025-09-30T04:32:02.286Z","avatar_url":"https://github.com/vuejs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-style-loader [![Build Status](https://circleci.com/gh/vuejs/vue-style-loader/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/vue-loader/tree/master) [![npm package](https://img.shields.io/npm/v/vue-style-loader.svg)](https://www.npmjs.com/package/vue-style-loader)\r\n\r\nThis 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.\r\n\r\n## Options\r\n\r\n- **manualInject** (3.1.0+):\r\n\r\n  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.\r\n\r\n  ``` js\r\n  import styles from 'styles.scss'\r\n\r\n  export default {\r\n    beforeCreate() { // or create a mixin for this purpose\r\n      if(styles.__inject__) {\r\n        styles.__inject__(this.$ssrContext)\r\n      }\r\n    }\r\n\r\n    render() {\r\n      return \u003cdiv class={styles.heading}\u003eHello World\u003c/div\u003e\r\n    }\r\n  }\r\n  ```\r\n\r\n  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.\r\n\r\n- **ssrId** (3.1.0+):\r\n\r\n  Type: `boolean`. Add `data-vue-ssr-id` attribute to injected `\u003cstyle\u003e` tags even when not in Node.js. This can be used with pre-rendering (instead of SSR) to avoid duplicate style injection on hydration.\r\n\r\n## Differences from `style-loader`\r\n\r\n### Server-Side Rendering Support\r\n\r\nWhen 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 `\u003chead\u003e`. If you are building a Vue SSR app, you probably should use this loader for CSS imported from JavaScript files too.\r\n\r\n### Misc\r\n\r\n- 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.\r\n\r\n- Fixed the issue that root-relative URLs are interpreted against chrome:// urls and make source map URLs work for injected `\u003cstyle\u003e` tags in Chrome.\r\n\r\n## License\r\n\r\nMIT\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuejs%2Fvue-style-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvuejs%2Fvue-style-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuejs%2Fvue-style-loader/lists"}