{"id":19429,"library":"css-loader-1","title":"css-loader","description":"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.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/webpack-contrib/css-loader","tags":["javascript"],"install":[{"cmd":"npm install css-loader-1","lang":"bash","label":"npm"},{"cmd":"yarn add css-loader-1","lang":"bash","label":"yarn"},{"cmd":"pnpm add css-loader-1","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"const styles = require('./style.css')","symbol":"default import (CSS Module)","correct":"import styles from './style.css'"},{"note":"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.","wrong":"import styles from './style.css'","symbol":"named import (CSS Modules with namedExport)","correct":"import * as styles from './style.css'"},{"note":"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.","wrong":"require('./style.css')","symbol":"type declaration for CSS Modules","correct":"import styles from './style.css'; export default styles;"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          { loader: 'style-loader' },\n          { loader: 'css-loader', options: { modules: true, sourceMap: true } }\n        ]\n      }\n    ]\n  }\n};\n\n// app.js\nimport styles from './app.module.css';\nconst element = `<div class=\"${styles.root}\">Hello</div>`;\ndocument.body.innerHTML = element;","lang":"javascript","description":"Configures webpack to process CSS files with CSS Modules, loads them via style-loader, and uses the module's scoped class names."},"warnings":[{"fix":"Change `import styles from './style.css'` to `import * as styles from './style.css'` and update related code.","message":"In version 7.0.0, modules.namedExport is true by default when esModule is enabled. This changes the import syntax from default to namespace import.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Use `import styles from './style.css'` and access styles.myClass, or configure `modules.exportLocalsConvention` to get the old behavior.","message":"In 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.","severity":"breaking","affected_versions":">=6.7.0 <7.0.0"},{"fix":"Use `modules.localIdentName` in the loader options.","message":"The `localIdentName` option is deprecated in favor of `modules.localIdentName` and `modules.localIdentRegExp`.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Be consistent: either use only camelCase or only kebab-case imports to avoid confusion.","message":"When using `camelCase` option, class names are exported in camelCase, but the original kebab-case names may still be accessible depending on the configuration.","severity":"gotcha","affected_versions":"*"},{"fix":"Remove `minimize` from css-loader options and use `CssMinimizerPlugin` in optimization.minimizer.","message":"The `minimize` option is deprecated and removed; use `cssnano` or another minifier via webpack plugins.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev style-loader`","cause":"style-loader is not installed.","error":"Module not found: Error: Can't resolve 'style-loader'"},{"fix":"Separate `composes` from `@import` in different files or avoid mixing them.","cause":"Using `composes: ... from ...` inside a file that also has `@import` statements can conflict.","error":"CSS Modules: `composes` cannot be used with `@import` at the same time."},{"fix":"Run `npm install --save-dev webpack@^4` or install the appropriate version.","cause":"webpack is not installed or not in node_modules.","error":"Error: Cannot find module 'webpack' (required by css-loader)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}