ts-css-modules-webpack-loader

Take the output of css-loader with css modules and creates a typescript definition of them

For a simpler setup and a verify mode look at css-modules-typescript-loader

Install

npm i -D ts-css-modules-webpack-loader

Example

    loaders: [
      {
        loader: require.resolve("style-loader"),
      },
      {
        loader: require.resolve("ts-css-modules-webpack-loader"),
        options: {
          banner: "//This file is automatically generated, please do not change this file!",
          dest: "./definitions",
          root: "./components",
        },
      },
      {
        loader: require.resolve("css-loader"),
        options: {
          modules: {
            localIdentName: "[name]___[local]",
          },
        },
      },
      {
        loader: require.resolve("sass-loader"),
        query: {
          modules: true,
        },
      },
    ],

Options

Options you can provide to the loader, none is required

Option	default	Usage
banner	""	Printed at the top of every definition file
dest	this.context	Definition folder (will use relative under from root), by default put it next to the css file
root	this.rootContext	Relative root of the tree (in general src is good)