Skip to content

Commit ee1d186

Browse files
authored
Update README.md
1 parent e83fb91 commit ee1d186

File tree

1 file changed

+31
-15
lines changed

1 file changed

+31
-15
lines changed

README.md

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
# typed-css-modules-loader
22
Replacement for the [typings-for-css-modules-loader](https://github.com/Jimdo/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](https://github.com/webpack-contrib/css-loader).
33

4-
# Installation
4+
## Installation
55

6-
```
7-
npm i -DE Megaputer/typed-css-modules-loader
8-
```
9-
or
10-
```
11-
yarn add -DE Megaputer/typed-css-modules-loader
6+
```bash
7+
npm i -DE Megaputer/dts-css-modules-loader
8+
# or
9+
yarn add -DE Megaputer/dts-css-modules-loader
1210
```
1311

14-
# Usage
12+
## Usage
1513

1614
```js
1715
{
@@ -21,13 +19,13 @@ yarn add -DE Megaputer/typed-css-modules-loader
2119
loader: 'typed-css-modules-loader',
2220
options: {
2321
namedExport: true,
24-
banner: "// This file is generated automatically."
22+
banner: "// This file is generated automatically"
2523
}
2624
},
2725
{
2826
loader: 'css-loader',
2927
options: {
30-
modules: true,
28+
modules: true, // this option must be enabled
3129
camelCase: 'only',
3230
localIdentName: '[local]',
3331
exportOnlyLocals: true
@@ -38,8 +36,8 @@ yarn add -DE Megaputer/typed-css-modules-loader
3836
}
3937
```
4038

41-
# Options
42-
## `namedExport`
39+
## Options
40+
### `namedExport`
4341
When the option is switched on classes exported as variables. Be sure you using `camelCase` option of [css-loader](https://github.com/webpack-contrib/css-loader) to avoid invalid name of variables.
4442

4543
```ts
@@ -59,8 +57,26 @@ declare const styles: I_buttonScss;
5957
export default styles;
6058
```
6159

62-
## `banner`
60+
### `banner`
6361
Adds a "banner" prefix to each generated file.
6462

65-
# License
66-
Licensed under the MIT license.
63+
## Usage in Typescript
64+
65+
```ts
66+
import * as styles from './_button.scss';
67+
```
68+
69+
To avoid errors about the absent module, you need to determine this:
70+
```ts
71+
/**
72+
* Trap for `*.scss.d.ts` files which are not generated yet.
73+
*/
74+
declare module '*.scss' {
75+
var classes: any;
76+
export = classes;
77+
}
78+
```
79+
When you add new classname Typescript compiler may not find the generated variable so you need to compile twice your files.
80+
81+
## License
82+
Licensed under the MIT license.

0 commit comments

Comments
 (0)