{"id":19451,"library":"dts-css-modules-loader","title":"dts-css-modules-loader","description":"Webpack loader that generates TypeScript definition files (.d.ts) for CSS Modules, acting as a replacement for the abandoned typings-for-css-modules-loader. Current stable version is 2.0.2. It integrates with css-loader (v2-v7) and requires webpack 5+ (breaking change from v1). Key differentiators: lightweight, no style content modification, supports named exports and custom typings generation via callback. Release cadence is low; last update was 2023.","status":"active","version":"2.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/Megaputer/dts-css-modules-loader","tags":["javascript","css-modules","typescript","typings","webpack","loader"],"install":[{"cmd":"npm install dts-css-modules-loader","lang":"bash","label":"npm"},{"cmd":"yarn add dts-css-modules-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add dts-css-modules-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; must be installed for the loader to function","package":"css-loader","optional":false}],"imports":[{"note":"When namedExport is false (default), use default import. Requires a .d.ts declaration for *.scss modules.","wrong":"const styles = require('./button.scss');","symbol":"default","correct":"import styles from './button.scss';"},{"note":"Only valid when namedExport: true is set in loader options. css-loader must use camelCase for class names.","wrong":"import * as styles from './button.scss'; // this works but you must enable namedExport; otherwise it fails","symbol":"named export","correct":"import { button, buttonActive } from './button.scss';"},{"note":"Works with both namedExport: true/false. With namedExport: true, the module exports both named and default (the object). With namedExport: false, the module exports a single default object (use = styles).","wrong":"","symbol":"namespace import","correct":"import * as styles from './button.scss';"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.scss$/,\n        use: [\n          'style-loader',\n          {\n            loader: 'dts-css-modules-loader',\n            options: { namedExport: true }\n          },\n          {\n            loader: 'css-loader',\n            options: {\n              modules: {\n                exportLocalsConvention: 'camelCaseOnly',\n                localIdentName: '[local]'\n              }\n            }\n          },\n          'sass-loader'\n        ]\n      }\n    ]\n  }\n};\n\n// YourComponent.ts\nimport { button, buttonActive } from './button.scss';\nconsole.log(button, buttonActive);","lang":"typescript","description":"Configures webpack to use dts-css-modules-loader with named exports and css-loader camelCase convention. Imports individual class names in TypeScript."},"warnings":[{"fix":"Upgrade webpack to version 5, or stay on dts-css-modules-loader v1.x which supports webpack 4.","message":"dts-css-modules-loader v2 requires webpack 5; it will not work with webpack 4.x.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Set css-loader options.modules.exportLocalsConvention to 'camelCaseOnly' or another convention that produces valid variable names.","message":"When using namedExport: true, css-loader must be configured with exportLocalsConvention: 'camelCaseOnly' to avoid invalid JavaScript identifiers.","severity":"gotcha","affected_versions":"*"},{"fix":"Add a global declaration file (e.g., typings.d.ts) with: declare module '*.scss' { const content: any; export default content; }","message":"TypeScript may complain about missing module declarations for .scss files until generated .d.ts files exist.","severity":"gotcha","affected_versions":"*"},{"fix":"Install or upgrade css-loader to at least version 2.0.0.","message":"Peer dependency css-loader must be >=2.0.0; older versions are not supported.","severity":"breaking","affected_versions":"*"}],"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 dts-css-modules-loader' and ensure the loader name string in webpack config matches exactly.","cause":"Loader not installed or webpack configuration path is incorrect.","error":"Module not found: Error: Can't resolve 'dts-css-modules-loader'"},{"fix":"Reorder the loaders: ['style-loader', 'dts-css-modules-loader', 'css-loader', 'sass-loader'].","cause":"Loader is placed after css-loader in the use array; it must be before css-loader to generate typings before css-loader runs.","error":"TypeError: Cannot read properties of undefined (reading 'match')"},{"fix":"Add a declaration file: declare module '*.scss' { export const [classname]: string; export default styles; }","cause":"No global .d.ts declaration for .scss files, and dts-css-modules-loader hasn't generated the .d.ts file yet (e.g., on first run).","error":"TypeScript error: Cannot find module './button.scss' or its corresponding type declarations."},{"fix":"Use import * as styles from '...' or switch namedExport to false.","cause":"Using default import (import styles from ...) but namedExport: true is set, so the module only exports named exports.","error":"TypeScript error: Module '...' has no default export"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}