Registry / type-stubs / dts-css-modules-loader

dts-css-modules-loader

library2.0.2jsnpmunverified

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.

type-stubs devops

npm install dts-css-modules-loader

package ↗

INSTALL

IMPORT

SIG · DTS-CSS-MODULES-LO

dts-css-modules-loader

type-stubsjavascriptv2.0.2

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 styles from './button.scss';

✗ const styles = require('./button.scss');

When namedExport is false (default), use default import. Requires a .d.ts declaration for *.scss modules.

named export

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

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

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

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

Debug

Known issues

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

affects: >=2.0.0

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

affects: *

gotchaTypeScript 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; }

affects: *

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

affects: *

Errors

Common errors & fixes

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

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.

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

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'].

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

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; }

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

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.

Upgrade

Version history

2.0.2latest on npm

Audit

Dependencies

css-loaderrequiredpeer dependency; must be installed for the loader to function

Agent activity

34 hits · last 30 days

node

OpenAI (training)

Resources

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