@@ -8,7 +8,7 @@ npm install --save-dev svelte-preprocess-cssmodules
8
8
9
9
## Rollup Configuration
10
10
11
- To be used with the plugin ` rollup-plugin-svelte ` .
11
+ To be used with the plugin [ ` rollup-plugin-svelte ` ] ( https://github.com/sveltejs/rollup-plugin-svelte ) .
12
12
13
13
``` js
14
14
import svelte from ' rollup-plugin-svelte' ;
@@ -27,6 +27,37 @@ export default {
27
27
}
28
28
```
29
29
30
+ ## Webpack Configuration
31
+
32
+ To be used with the loader [ ` svelte-loader ` ] ( https://github.com/sveltejs/svelte-loader ) .
33
+
34
+ ``` js
35
+ const cssModules = require (' svelte-preprocess-cssmodules' );
36
+
37
+ module .exports = {
38
+ ...
39
+ module: {
40
+ rules: [
41
+ {
42
+ test: / \. svelte$ / ,
43
+ exclude: / node_modules/ ,
44
+ use: [
45
+ {
46
+ loader: ' svelte-loader' ,
47
+ options: {
48
+ preprocess: [
49
+ cssModules (),
50
+ ]
51
+ }
52
+ }
53
+ ]
54
+ }
55
+ ]
56
+ }
57
+ ...
58
+ }
59
+ ```
60
+
30
61
## Options
31
62
Pass an object of the following properties
32
63
@@ -36,6 +67,7 @@ Pass an object of the following properties
36
67
| ` includePaths ` | ` {Array} ` | ` [] ` (Any) | An array of paths to be processed |
37
68
38
69
70
+
39
71
## Usage on Svelte Component
40
72
41
73
** On the HTML markup** (not the CSS), Prefix any class name that require CSS Modules by * $style.* => ` $style.My_CLASSNAME `
@@ -144,6 +176,47 @@ kebab-case or camelCase, name the classes the way you're more comfortable with.
144
176
<span class =" redMajenta-2wdRa3" >Majenta</span >
145
177
```
146
178
179
+ ### Use class multiple times
180
+ A class can be naturally used on multiple elements.
181
+
182
+ * Before*
183
+
184
+ ``` html
185
+ <style >
186
+ .red { color : red ; }
187
+ .blue { color : blue ; }
188
+ .bold { font-weight : bold ; }
189
+ </style >
190
+
191
+ <p class =" $style.red $style.bold" >My red text</p >
192
+ <p class =" $style.blue $style.bold" >My blue text</p >
193
+ ```
194
+
195
+ * After*
196
+
197
+ ``` html
198
+ <style >
199
+ .red-en-6pb { color : red ; }
200
+ .blue-oVk-n1 { color : blue ; }
201
+ .bold-2jIMhI { font-weight : bold ; }
202
+ </style >
203
+
204
+ <p class =" red-en-6pb bold-2jIMhI" >My red text</p >
205
+ <p class =" blue-oVk-n1 bold-2jIMhI" >My blue text</p >
206
+ ```
207
+
208
+ ### Work with class directives
209
+ Toggling a class on an element.
210
+
211
+ ``` html
212
+ <style >
213
+ .bold { font-weight : bold ; }
214
+ </style >
215
+
216
+ <p class:$style.bold ={isActive} >My red text</p >
217
+ <p class =" {isActive ? '$style.bold' : ''}" >My blue text</p >
218
+ ```
219
+
147
220
## Example
148
221
149
222
* Rollup Config*
0 commit comments