vue-style-loader

4.1.3 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

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

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

fix

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

error Cannot find module 'vue-style-loader' ↓

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

fix

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

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

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

fix

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

Warnings

breaking vue-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.

gotcha 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. ↓

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

deprecated The '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.

gotcha 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. ↓

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

gotcha In 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.

Install

npm install vue-style-loader

yarn add vue-style-loader

pnpm add vue-style-loader

Imports

vue-style-loader

wrong

import styleLoader from 'vue-style-loader'

correct

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

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

manualInject

wrong

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

correct

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

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

ssrId

wrong

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

correct

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

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

Quickstart

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>