A small Webpack loader to generate typings for your CSS-Modules. Created as a replacement for the frozend typings-for-css-modules-loader. This loader does not make any changes in content of styles, just creates *.d.ts file during the work. It is assumed that the content will be preprocessed first by css-loader.
- Since version 2.x only supports
webpackversion is5
npm i -D dts-css-modules-loader
# or
yarn add -D dts-css-modules-loader{test: /\.scss$/,use: [{loader: 'style-loader',options: {esModule: false,},},{loader: 'dts-css-modules-loader',options: {namedExport: true}},{loader: 'css-loader',options: {// options for the v5 of css-loadermodules: {exportLocalsConvention: 'camelCaseOnly',localIdentName: '[local]'}}},'sass-loader']}When the option is switched on classes exported as variables. Be sure you using camelCase option of css-loader to avoid invalid name of variables.
// This file is generated automatically.exportconstbutton: string;exportconstbuttonActive: string;When option is off:
// This file is generated automatically.exportinterfaceI_buttonScss{'button': string'buttonActive': string}declareconststyles: I_buttonScss;export=styles;Adds a "banner" prefix to each generated file.
A function that accepts classes (an array of string) and returns the content of declaration file:
customTypings: classes=>{letcontent='// This file is generated automatically\ndeclare const styles: {\n';for(constcofclasses){content+=` ${c}: string;\n`;}content+='};\nexport default styles;\n';returncontent;}namedExport and banner option will be ignored
If there are no classes, the typings file will not be generated, and the existing will be deleted.
import*asstylesfrom'./_button.scss';To avoid errors about the absent module, you need to determine this:
/** * Trap for `*.scss.d.ts` files which are not generated yet. */declare module '*.scss'{varclasses: any;export=classes;}When you add new classname Typescript compiler may not find the generated variable so you need to compile twice your files.
Licensed under the MIT license.