{"id":20695,"library":"vue-style-loader","title":"vue-style-loader","description":"A webpack loader that dynamically injects CSS into the document as <style> tags, specifically designed for Vue.js single-file components. Version 4.1.3 is the current stable release, with maintenance mode active. It is a fork of style-loader, adding SSR support (collecting styles into context.styles for node targets) and a manualInject option for non-vue-file styles. Unlike style-loader, it does not support url mode, reference counting, singleton, or insertAt options; instead it intelligently selects the best injection strategy. It is a core dependency of vue-loader and automatically used for <style> blocks in .vue files.","status":"maintenance","version":"4.1.3","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/vuejs/vue-style-loader","tags":["javascript"],"install":[{"cmd":"npm install vue-style-loader","lang":"bash","label":"npm"},{"cmd":"yarn add vue-style-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-style-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Webpack loader utilities for parsing queries and options","package":"loader-utils","optional":false},{"reason":"Generates hash for SSR IDs and module IDs","package":"hash-sum","optional":false}],"imports":[{"note":"This is a webpack loader, not a library. Use it in webpack config as a string or path in the 'use' array.","wrong":"import styleLoader from 'vue-style-loader'","symbol":"vue-style-loader","correct":"module.exports = { module: { rules: [ { test: /\\.css$/, use: ['vue-style-loader', 'css-loader'] } ] } }"},{"note":"manualInject is a loader option, not an import. When enabled, the imported style object exposes __inject__ method instead of auto-injecting.","wrong":"import styles from 'styles.scss' // styles is injected automatically; to prevent that, set manualInject: true in webpack config","symbol":"manualInject","correct":"import styles from 'styles.scss' // then if (styles.__inject__) styles.__inject__(this.$ssrContext)"},{"note":"ssrId is a loader option; when true, adds data-vue-ssr-id attribute to style tags even outside Node, useful for pre-rendering.","wrong":"import { ssrId } from 'vue-style-loader'","symbol":"ssrId","correct":"module.exports = { module: { rules: [ { test: /\\.css$/, use: [{ loader: 'vue-style-loader', options: { ssrId: true } }, 'css-loader'] } ] } }"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader'\n      },\n      {\n        test: /\\.css$/,\n        use: [\n          'vue-style-loader',\n          'css-loader'\n        ]\n      }\n    ]\n  }\n}\n\n// App.vue (Vue single-file component)\n<template>\n  <div class=\"example\">Hello</div>\n</template>\n\n<style scoped>\n.example {\n  color: red;\n}\n</style>","lang":"javascript","description":"Configures webpack to use vue-style-loader for .css files and vue-loader for .vue files, enabling SSR and scoped style injection in Vue components."},"warnings":[{"fix":"Upgrade project to Webpack 2 or higher.","message":"vue-style-loader v3 dropped support for Webpack 1. If upgrading from v2, ensure you are using Webpack 2+.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Remove unsupported options from loader configuration. Use style-loader if those features are needed.","message":"vue-style-loader does not support url mode, reference counting, singleton, or insertAt options that exist in style-loader. Using these options will be silently ignored or cause errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Avoid manualInject unless necessary; prefer default injection behavior.","message":"The 'manualInject' option is considered advanced usage and may be deprecated in future versions. Rely on automatic injection from vue-loader for .vue files.","severity":"deprecated","affected_versions":">=3.1.0"},{"fix":"Enable manualInject: true in loader options and call __inject__() manually to control injection timing.","message":"When using vue-style-loader with non-vue files (e.g., plain .css imported in JS), styles are injected as side effects unless manualInject is enabled. This can cause unexpected style injection order.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to v4.1.3 or later.","message":"In HMR (Hot Module Replacement), ES module interop may cause style duplication if not handled correctly. This was fixed in v4.1.3.","severity":"gotcha","affected_versions":"<4.1.3"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add vue-loader rule: { test: /\\.vue$/, loader: 'vue-loader' }","cause":"Webpack is trying to parse a .vue file without the vue-loader configured.","error":"Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type."},{"fix":"Run npm install vue-style-loader --save-dev","cause":"vue-style-loader is not installed or not in node_modules.","error":"Cannot find module 'vue-style-loader'"},{"fix":"Use object syntax: { loader: 'vue-style-loader', options: { manualInject: true } }","cause":"Incorrect webpack config syntax when passing options to vue-style-loader.","error":"Error: options/query provided without loader (use loader + options)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}