dts-css-modules-loader

2.0.2 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Module not found: Error: Can't resolve 'dts-css-modules-loader' ↓

cause Loader not installed or webpack configuration path is incorrect.

fix

Run 'npm install --save-dev dts-css-modules-loader' and ensure the loader name string in webpack config matches exactly.

error TypeError: Cannot read properties of undefined (reading 'match') ↓

cause Loader is placed after css-loader in the use array; it must be before css-loader to generate typings before css-loader runs.

fix

Reorder the loaders: ['style-loader', 'dts-css-modules-loader', 'css-loader', 'sass-loader'].

error TypeScript error: Cannot find module './button.scss' or its corresponding type declarations. ↓

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

fix

Add a declaration file: declare module '*.scss' { export const [classname]: string; export default styles; }

error TypeScript error: Module '...' has no default export ↓

cause Using default import (import styles from ...) but namedExport: true is set, so the module only exports named exports.

fix

Use import * as styles from '...' or switch namedExport to false.

Warnings

breaking dts-css-modules-loader v2 requires webpack 5; it will not work with webpack 4.x. ↓

fix Upgrade webpack to version 5, or stay on dts-css-modules-loader v1.x which supports webpack 4.

gotcha When using namedExport: true, css-loader must be configured with exportLocalsConvention: 'camelCaseOnly' to avoid invalid JavaScript identifiers. ↓

fix Set css-loader options.modules.exportLocalsConvention to 'camelCaseOnly' or another convention that produces valid variable names.

gotcha TypeScript may complain about missing module declarations for .scss files until generated .d.ts files exist. ↓

fix Add a global declaration file (e.g., typings.d.ts) with: declare module '*.scss' { const content: any; export default content; }

breaking Peer dependency css-loader must be >=2.0.0; older versions are not supported. ↓

fix Install or upgrade css-loader to at least version 2.0.0.

Install

npm install dts-css-modules-loader

yarn add dts-css-modules-loader

pnpm add dts-css-modules-loader

Imports

default
wrong
```
const styles = require('./button.scss');
```
correct
```
import styles from './button.scss';
```
When namedExport is false (default), use default import. Requires a .d.ts declaration for *.scss modules.

named export

wrong

import * as styles from './button.scss'; // this works but you must enable namedExport; otherwise it fails

correct

import { button, buttonActive } from './button.scss';

Only valid when namedExport: true is set in loader options. css-loader must use camelCase for class names.

namespace import
```
import * as styles from './button.scss';
```
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).

Quickstart

Configures webpack to use dts-css-modules-loader with named exports and css-loader camelCase convention. Imports individual class names in TypeScript.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'dts-css-modules-loader',
            options: { namedExport: true }
          },
          {
            loader: 'css-loader',
            options: {
              modules: {
                exportLocalsConvention: 'camelCaseOnly',
                localIdentName: '[local]'
              }
            }
          },
          'sass-loader'
        ]
      }
    ]
  }
};

// YourComponent.ts
import { button, buttonActive } from './button.scss';
console.log(button, buttonActive);