https://github.com/yvanguidoin/ts-css-modules-webpack-loader
Create Typescript definitions for CSS modules from css-loader output
https://github.com/yvanguidoin/ts-css-modules-webpack-loader
css css-modules loader typescript webpack
Last synced: 5 months ago
JSON representation
Create Typescript definitions for CSS modules from css-loader output
- Host: GitHub
- URL: https://github.com/yvanguidoin/ts-css-modules-webpack-loader
- Owner: YvanGuidoin
- License: mit
- Created: 2018-10-16T16:15:22.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-04-19T18:22:16.000Z (almost 5 years ago)
- Last Synced: 2025-07-29T23:13:08.685Z (6 months ago)
- Topics: css, css-modules, loader, typescript, webpack
- Language: JavaScript
- Size: 410 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ts-css-modules-webpack-loader
[](https://travis-ci.com/YvanGuidoin/ts-css-modules-webpack-loader)
[](https://badge.fury.io/js/ts-css-modules-webpack-loader)
Take the output of [css-loader](https://github.com/webpack-contrib/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](https://github.com/seek-oss/css-modules-typescript-loader)
### Install
```
npm i -D ts-css-modules-webpack-loader
```
### Example
```javascript
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) |