css-loader-1

library2.0.0jsnpmunverified

CSS loader for webpack that interprets @import and url() like import/require() and resolves them. Current stable version is 7.1.4 (Feb 2026), with frequent releases. Key differentiator: it is the official webpack CSS loader, supporting CSS Modules, source maps, and advanced options like importLoaders and camelCase. Requires webpack 4+ as a peer dependency. Versions 6.x had a breaking change in 6.7.0 (named export default changes), and version 7.0.0 makes modules.namedExport true by default when esModule is enabled, requiring a migration from default import to namespace import.

devops

npm install css-loader-1

github ↗package ↗

INSTALL

IMPORT

SIG · CSS-LOADER-1

css-loader-1

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

default import (CSS Module)

✓ import styles from './style.css'

✗ const styles = require('./style.css')

In webpack with css-loader and style-loader, CSS is typically imported as a side-effect (no default export) unless CSS Modules are enabled. Using require() may work but is not recommended for ESM projects.

named import (CSS Modules with namedExport)

✓ import * as styles from './style.css'

✗ import styles from './style.css'

Since css-loader v7.0.0 with esModule enabled, modules.namedExport defaults to true. Use namespace import to access class names; default import will not work.

type declaration for CSS Modules

✓ import styles from './style.css'; export default styles;

✗ require('./style.css')

For TypeScript, you need a type declaration file (e.g., custom.d.ts) with 'declare module "*.module.css"' to avoid errors. The correct import style depends on your css-loader config.

Configures webpack to process CSS files with CSS Modules, loads them via style-loader, and uses the module's scoped class names.

// webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true, sourceMap: true } } ] } ] } }; // app.js import styles from './app.module.css'; const element = `<div class="${styles.root}">Hello</div>`; document.body.innerHTML = element;

Debug

Known issues

breakingIn version 7.0.0, modules.namedExport is true by default when esModule is enabled. This changes the import syntax from default to namespace import.

fix

Change `import styles from './style.css'` to `import * as styles from './style.css'` and update related code.

affects: >=7.0.0

breakingIn version 6.7.0, the default export for CSS Modules changed from an object with class names to the module itself, requiring use of the `default` export.

fix

Use `import styles from './style.css'` and access styles.myClass, or configure `modules.exportLocalsConvention` to get the old behavior.

affects: >=6.7.0 <7.0.0

deprecatedThe `localIdentName` option is deprecated in favor of `modules.localIdentName` and `modules.localIdentRegExp`.

fix

Use `modules.localIdentName` in the loader options.

affects: >=3.0.0

gotchaWhen using `camelCase` option, class names are exported in camelCase, but the original kebab-case names may still be accessible depending on the configuration.

fix

Be consistent: either use only camelCase or only kebab-case imports to avoid confusion.

affects: *

deprecatedThe `minimize` option is deprecated and removed; use `cssnano` or another minifier via webpack plugins.

fix

Remove `minimize` from css-loader options and use `CssMinimizerPlugin` in optimization.minimizer.

affects: >=2.0.0

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`

CSS Modules: `composes` cannot be used with `@import` at the same time.

Using `composes: ... from ...` inside a file that also has `@import` statements can conflict.

fix

Separate `composes` from `@import` in different files or avoid mixing them.

Error: Cannot find module 'webpack' (required by css-loader)

webpack is not installed or not in node_modules.

fix

Run `npm install --save-dev webpack@^4` or install the appropriate version.

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

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

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