style-loader

library4.0.0jsnpmunverified

Webpack loader that injects CSS into the DOM by appending <style> or <link> tags. Version 4.0.0 (April 2024) requires webpack 5.27+ and Node.js 18.12+. Commonly paired with css-loader for development workflows. Supports multiple injection strategies (styleTag, singletonStyleTag, lazyStyleTag, linkTag) and can use CSS modules. Not recommended for production without additional configuration (e.g., ExtractTextPlugin). Maintained by the webpack-contrib team with regular updates.

web-framework

npm install style-loader

github ↗package ↗

INSTALL

IMPORT

SIG · STYLE-LOADER

style-loader

web-frameworkjavascriptv4.0.0

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.

style-loader

✓ // In webpack config: use 'style-loader' as a string in the 'use' array module.exports = { module: { rules: [{ test: /\.css$/i, use: ['style-loader', 'css-loader'] }] } };

✗ const styleLoader = require('style-loader'); // Not how loaders are typically imported

style-loader is used as a webpack loader, not imported directly in application code. Configure it in webpack.config.js.

use

✓ use: ['style-loader', 'css-loader']

✗ use: [{ loader: 'style-loader' }, { loader: 'css-loader' }] // Correct object form, but wrong if using 'use' as an import

String form is shorthand; object form allows options. Both are correct.

options

✓ use: [{ loader: 'style-loader', options: { injectType: 'singletonStyleTag' } }]

✗ use: ['style-loader', { loader: 'style-loader', options: { injectType: 'singletonStyleTag' } }] // Duplicate loader entry

Options are passed via the loader object. Cannot use string form when specifying options.

Basic webpack configuration using style-loader and css-loader to bundle CSS into a JavaScript bundle.

// webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader'] } ] }, mode: 'development' };

Debug

Known issues

breakingBreaking change in v4: minimum supported webpack version is 5.27.0 and Node.js version is 18.12.0.

fix

Upgrade webpack to >=5.27.0 and Node.js to >=18.12.0.

affects: >=4.0.0

deprecatedThe 'modules.namedExport' option was removed in v4. Use 'css-loader' options for CSS modules.

fix

Remove 'modules.namedExport' from style-loader options; configure CSS modules in css-loader instead.

affects: >=4.0.0

gotchastyle-loader is not safe for production by default; it injects styles dynamically which can cause performance issues and FOUC.

fix

Use MiniCssExtractPlugin for production builds instead of style-loader.

affects: *

gotchaSource maps do not work with 'singletonStyleTag' injectType.

fix

Use 'styleTag' (default) or 'linkTag' if source maps are needed.

affects: *

breakingIn v4, the 'insert' option can only be a CSS selector or a path to a module exporting a function; inline function definitions are no longer allowed.

fix

If you used an inline function for 'insert', move it to a separate module and reference its path.

affects: >=4.0.0

gotchaWhen using CSS modules with style-loader, all local class names are exported as named exports from the CSS file.

fix

Use `import * as styles from './styles.css'` and access classes via `styles['my-class']`.

affects: *

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'style-loader'

style-loader is not installed.

fix

Run `npm install --save-dev style-loader` to install the package.

Error: 'style-loader' without 'css-loader' will not work

Missing css-loader in the webpack config.

fix

Add 'css-loader' to the use array: use: ['style-loader', 'css-loader']

TypeError: Cannot read properties of undefined (reading 'indexOf')

Using an inline function for the 'insert' option in style-loader v4.

fix

Use a CSS selector string or a path to a module that exports the insert function.

Upgrade

Version history

4.0.0latest on npm

Audit

Dependencies

webpackrequiredRequired as a peer dependency; style-loader is a webpack loader and only works within a webpack build pipeline.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/webpack-contrib/style-loader ↗

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