Skip to content

The `css-modules-ts-loader` is a webpack plugin that creates a `.d.ts` file with css classes and ids to be imported by typescript.

License

Notifications You must be signed in to change notification settings

sardinedev/css-modules-ts-loader

Repository files navigation

codecov

css-modules-ts-loader

The css-modules-ts-loader creates a .d.ts file with css classes and ids to be imported by typescript.

Getting Started

First, you'll need to install css-modules-ts-loader:

npm install --save-dev @greyskullrocks/css-modules-ts-loader

And then configure your webpack config file:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "@greyskullrocks/css-modules-ts-loader",
            options: {
              banner: "Hey, css-modules-ts-loader created this file for you!"
            }
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
              localsConvention: "camelCaseOnly"
            }
          }
        ],
        exclude: /\.module\.css$/
      }
    ]
  }
};

How it works?

This loader depends on css-loader and the modules option to be enabled.

Options

Name Type Default Description
banner {Boolean|String} true Creates a message at the beginning of each generated .d.ts file.

banner

Type: {Boolean\|String} Deafault: true

Creates a message at the beginning of each generated .d.ts file. You can specify your own message by passing your own string.

License

MIT

About

The `css-modules-ts-loader` is a webpack plugin that creates a `.d.ts` file with css classes and ids to be imported by typescript.

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •