{"id":19430,"library":"css-loader","title":"css-loader","description":"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.","status":"active","version":"7.1.4","language":"javascript","source_language":"en","source_url":"https://github.com/webpack/css-loader","tags":["javascript","webpack","css","loader","url","import"],"install":[{"cmd":"npm install css-loader","lang":"bash","label":"npm"},{"cmd":"yarn add css-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add css-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency; css-loader only works as a webpack loader.","package":"webpack","optional":false},{"reason":"Optional peer dependency for Rspack support.","package":"@rspack/core","optional":true}],"imports":[{"note":"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.","wrong":"module.exports = { module: { rules: [ { test: /\\.css$/i, use: 'css-loader' } ] } }","symbol":"css-loader","correct":"module.exports = { module: { rules: [ { test: /\\.css$/i, use: ['style-loader', 'css-loader'] } ] } }"},{"note":"Since v7.0.0, when esModule is enabled, named exports are default. Use default import for entire CSS module object.","wrong":"import { default as styles } from './styles.module.css';","symbol":"default","correct":"import styles from './styles.module.css';"},{"note":"Since v7.0.0, modules.namedExport defaults to true when esModule is true. Use namespace import to access individual class names.","wrong":"import styles from './styles.module.css';","symbol":"named","correct":"import * as styles from './styles.module.css';"}],"quickstart":{"code":"// file.js\nimport * as styles from './styles.module.css';\n\nconsole.log(styles.myClass);\n\n// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: ['style-loader', 'css-loader'],\n      },\n    ],\n  },\n};","lang":"typescript","description":"Shows basic webpack configuration for CSS Modules with latest named export syntax (v7+)."},"warnings":[{"fix":"Use import * as styles from './styles.module.css' instead of import styles from './styles.module.css'.","message":"In 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.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Use { exportLocalsConvention: { camelCase: true } } instead of 'camelCase'.","message":"String values for `modules.exportLocalsConvention` are deprecated in favor of object syntax.","severity":"deprecated","affected_versions":">=6.0.0"},{"fix":"Use a custom filter or set url: false to prevent resolution of absolute paths.","message":"Absolute 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.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Use url('~module/image.png') instead of url('module/image.png').","message":"The `url()` function with `~` prefix to resolve node_modules only works if the value starts with `~`. Common mistake: forgetting tilde for aliased paths.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade Node.js to version 18.12.0 or later.","message":"Node.js >= 18.12.0 is required starting from v7. Older Node versions will cause errors.","severity":"breaking","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add a rule with css-loader in module.rules: { test: /\\.css$/, use: ['style-loader', 'css-loader'] }","cause":"Missing rule for CSS files in webpack config.","error":"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."},{"fix":"Run: npm install --save-dev css-loader","cause":"css-loader not installed as dev dependency.","error":"Cannot find module 'css-loader'"},{"fix":"Use import * as styles from './styles.module.css'","cause":"Using default import with named exports enabled (v7+ default).","error":"Error: 'default' is not exported by .../styles.module.css"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}