css-loader

library7.1.4jsnpmunverified

The css-loader is a webpack loader that interprets @import and url() in CSS files like JavaScript import/require, resolving them into modules. Current stable version is 7.1.4, released in February 2026, with active development and frequent minor releases. It supports CSS Modules, source maps, and various import/url resolution strategies. Unlike other CSS loaders, it is designed specifically for webpack 5+ and integrates deeply with webpack's module system. Peer dependencies include webpack ^5.27.0 and optional @rspack/core. Key differentiators include fine-grained options for url/import filtering, CSS Modules with named exports, and compatibility with modern CSS features like nesting and @scope.

web-framework

npm install css-loader

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · CSS-LOADER

css-loader

web-frameworkjavascriptv7.1.4

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.

css-loader

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

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

css-loader is not imported directly in JavaScript; it is configured in webpack config as a loader. Common mistake: using string instead of array when combining with style-loader.

default

✓ import styles from './styles.module.css';

✗ import { default as styles } from './styles.module.css';

Since v7.0.0, when esModule is enabled, named exports are default. Use default import for entire CSS module object.

named

✓ import * as styles from './styles.module.css';

✗ import styles from './styles.module.css';

Since v7.0.0, modules.namedExport defaults to true when esModule is true. Use namespace import to access individual class names.

Shows basic webpack configuration for CSS Modules with latest named export syntax (v7+).

// file.js import * as styles from './styles.module.css'; console.log(styles.myClass); // webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, ], }, };

Debug

Known issues

breakingIn v7.0.0, modules.namedExport defaults to true when esModule is true. This changes how CSS classes are imported: previously default import worked, now require namespace import.

fix

Use import * as styles from './styles.module.css' instead of import styles from './styles.module.css'.

affects: >=7.0.0

deprecatedString values for `modules.exportLocalsConvention` are deprecated in favor of object syntax.

fix

Use { exportLocalsConvention: { camelCase: true } } instead of 'camelCase'.

affects: >=6.0.0

gotchaAbsolute URLs in url() are resolved relative to server root since v4.0.0, which may break if your server root is different from project root.

fix

Use a custom filter or set url: false to prevent resolution of absolute paths.

affects: >=4.0.0

gotchaThe `url()` function with `~` prefix to resolve node_modules only works if the value starts with `~`. Common mistake: forgetting tilde for aliased paths.

fix

Use url('~module/image.png') instead of url('module/image.png').

affects: >=1.0.0

breakingNode.js >= 18.12.0 is required starting from v7. Older Node versions will cause errors.

fix

Upgrade Node.js to version 18.12.0 or later.

affects: >=7.0.0

Errors

Common errors & fixes

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Missing rule for CSS files in webpack config.

fix

Add a rule with css-loader in module.rules: { test: /\.css$/, use: ['style-loader', 'css-loader'] }

Cannot find module 'css-loader'

css-loader not installed as dev dependency.

fix

Run: npm install --save-dev css-loader

Error: 'default' is not exported by .../styles.module.css

Using default import with named exports enabled (v7+ default).

fix

Use import * as styles from './styles.module.css'

Upgrade

Version history

7.1.4latest on npm

Audit

Dependencies

webpackrequiredRequired peer dependency; css-loader only works as a webpack loader.

@rspack/coreoptionalOptional peer dependency for Rspack support.

Agent activity

11 hits · last 30 days

node

Resources

githubhttps://github.com/webpack/css-loader ↗

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

homepagehttps://webpack.js.org/loaders/css-loader/ ↗