Registry / web-framework / vue-style-loader

vue-style-loader

library4.1.3jsnpmunverified

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.

web-framework

npm install vue-style-loader

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-STYLE-LOADER

vue-style-loader

web-frameworkjavascriptv4.1.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vue-style-loader

✓ module.exports = { module: { rules: [ { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] } ] } }

✗ import styleLoader from 'vue-style-loader'

This is a webpack loader, not a library. Use it in webpack config as a string or path in the 'use' array.

manualInject

✓ import styles from 'styles.scss' // then if (styles.__inject__) styles.__inject__(this.$ssrContext)

✗ import styles from 'styles.scss' // styles is injected automatically; to prevent that, set manualInject: true in webpack config

manualInject is a loader option, not an import. When enabled, the imported style object exposes __inject__ method instead of auto-injecting.

ssrId

✓ module.exports = { module: { rules: [ { test: /\.css$/, use: [{ loader: 'vue-style-loader', options: { ssrId: true } }, 'css-loader'] } ] } }

✗ import { ssrId } from 'vue-style-loader'

ssrId is a loader option; when true, adds data-vue-ssr-id attribute to style tags even outside Node, useful for pre-rendering.

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.

// webpack.config.js module.exports = { module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] } ] } } // App.vue (Vue single-file component) <template> <div class="example">Hello</div> </template> <style scoped> .example { color: red; } </style>

Debug

Known issues

breakingvue-style-loader v3 dropped support for Webpack 1. If upgrading from v2, ensure you are using Webpack 2+.

fix

Upgrade project to Webpack 2 or higher.

affects: >=3.0.0

gotchavue-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.

fix

Remove unsupported options from loader configuration. Use style-loader if those features are needed.

affects: >=1.0.0

deprecatedThe 'manualInject' option is considered advanced usage and may be deprecated in future versions. Rely on automatic injection from vue-loader for .vue files.

fix

Avoid manualInject unless necessary; prefer default injection behavior.

affects: >=3.1.0

gotchaWhen 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.

fix

Enable manualInject: true in loader options and call __inject__() manually to control injection timing.

affects: >=1.0.0

gotchaIn HMR (Hot Module Replacement), ES module interop may cause style duplication if not handled correctly. This was fixed in v4.1.3.

fix

Upgrade to v4.1.3 or later.

affects: <4.1.3

Errors

Common errors & fixes

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.

Webpack is trying to parse a .vue file without the vue-loader configured.

fix

Add vue-loader rule: { test: /\.vue$/, loader: 'vue-loader' }

Cannot find module 'vue-style-loader'

vue-style-loader is not installed or not in node_modules.

fix

Run npm install vue-style-loader --save-dev

Error: options/query provided without loader (use loader + options)

Incorrect webpack config syntax when passing options to vue-style-loader.

fix

Use object syntax: { loader: 'vue-style-loader', options: { manualInject: true } }

Upgrade

Version history

4.1.3latest on npm

Audit

Dependencies

loader-utilsrequiredWebpack loader utilities for parsing queries and options

hash-sumrequiredGenerates hash for SSR IDs and module IDs

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vuejs/vue-style-loader ↗

packagehttps://www.npmjs.com/package/vue-style-loader ↗