@@ -23,16 +23,11 @@ npm install --save-dev css-loader
23
23
24
24
<h2 align =" center " >Usage</h2 >
25
25
26
- ** require**
27
- ``` js
28
- const css = require (' css!./file.css' )
29
- ```
26
+ Use the loader either via your webpack config, CLI or inline.
30
27
31
- ** webpack.config.js**
32
- ``` js
33
- const css = require (' file.css' )
34
- ```
28
+ ### Via webpack config (recommended)
35
29
30
+ ** webpack.config.js**
36
31
``` js
37
32
module .exports = {
38
33
module: {
@@ -43,17 +38,42 @@ module.exports = {
43
38
}
44
39
]
45
40
}
46
- };
41
+ }
42
+ ```
43
+
44
+ ** In your application**
45
+ ``` js
46
+ import css from ' file.css' ;
47
+ ```
48
+
49
+ ### CLI
50
+
51
+ ``` bash
52
+ webpack --module-bind ' css=style-loader!css-loader'
53
+ ```
54
+
55
+ ** In your application**
56
+ ``` js
57
+ import css from ' file.css' ;
47
58
```
48
59
49
- ` @import ` and ` url() ` are interpreted like ` require() ` and will be resolved by the css-loader.
60
+ ### Inline
61
+
62
+ ** In your application**
63
+ ``` js
64
+ import css from ' style-loader!css-loader!./file.css' ;
65
+ ```
66
+
67
+ <h2 align =" center " >Options</h2 >
68
+
69
+ ` @import ` and ` url() ` are interpreted like ` import ` and will be resolved by the css-loader.
50
70
Good loaders for requiring your assets are the [ file-loader] ( https://github.com/webpack/file-loader )
51
71
and the [ url-loader] ( https://github.com/webpack/url-loader ) which you should specify in your config (see below).
52
72
53
73
To be compatible with existing css files (if not in CSS Module mode):
54
74
55
- * ` url(image.png) ` => ` require(" ./image.png" ) `
56
- * ` url(~module/image.png) ` => ` require(" module/image.png" ) `
75
+ * ` url(image.png) ` => ` require(' ./image.png' ) `
76
+ * ` url(~module/image.png) ` => ` require(' module/image.png' ) `
57
77
58
78
<h2 align =" center " >Options</h2 >
59
79
@@ -68,7 +88,7 @@ To be compatible with existing css files (if not in CSS Module mode):
68
88
| ** ` camelCase ` ** | ` false ` | Export Classnames in CamelCase|
69
89
| ** ` importLoaders ` ** | ` 0 ` | Number of loaders applied before CSS loader|
70
90
71
- This webpack config can load css files, embed small png images as Data URLs and jpg images as files.
91
+ This webpack config can load CSS files, embed small png images as Data URLs and JPG images as files.
72
92
73
93
** webpack.config.js**
74
94
``` js
@@ -107,17 +127,17 @@ rules: [
107
127
{
108
128
test: / \. css$ / ,
109
129
use: [
110
- " style-loader" ,
130
+ ' style-loader' ,
111
131
{
112
- loader: " css-loader" ,
113
- options: { root: " . " }
132
+ loader: ' css-loader' ,
133
+ options: { root: ' . ' }
114
134
}
115
135
]
116
136
}
117
137
]
118
138
```
119
139
120
- * ` url(/image.png) ` => ` require(" ./image.png" ) `
140
+ * ` url(/image.png) ` => ` require(' ./image.png' ) `
121
141
122
142
Using 'Root-relative' urls is not recommended. You should only use it for legacy CSS files.
123
143
@@ -151,8 +171,8 @@ The loader replaces local selectors with unique identifiers. The choosen unique
151
171
152
172
``` js
153
173
exports .locals = {
154
- className: " _23_aKvs-b8bW2Vg3fwHozO" ,
155
- subClass: " _13LGdX8RMStbBE9w-t0gZ1"
174
+ className: ' _23_aKvs-b8bW2Vg3fwHozO' ,
175
+ subClass: ' _13LGdX8RMStbBE9w-t0gZ1'
156
176
}
157
177
```
158
178
@@ -231,8 +251,8 @@ This doesn't result in any change to the CSS itself but exports multiple class n
231
251
232
252
``` js
233
253
exports .locals = {
234
- className: " _23_aKvs-b8bW2Vg3fwHozO" ,
235
- subClass: " _13LGdX8RMStbBE9w-t0gZ1 _23_aKvs-b8bW2Vg3fwHozO"
254
+ className: ' _23_aKvs-b8bW2Vg3fwHozO' ,
255
+ subClass: ' _13LGdX8RMStbBE9w-t0gZ1 _23_aKvs-b8bW2Vg3fwHozO'
236
256
}
237
257
```
238
258
@@ -253,14 +273,14 @@ To import a local class name from another module:
253
273
254
274
``` css
255
275
:local(.continueButton ) {
256
- composes : button from " library/button.css" ;
276
+ composes : button from ' library/button.css' ;
257
277
background : red ;
258
278
}
259
279
```
260
280
261
281
``` css
262
282
:local(.nameEdit ) {
263
- composes : edit highlight from " ./edit.css" ;
283
+ composes : edit highlight from ' ./edit.css' ;
264
284
background : red ;
265
285
}
266
286
```
@@ -269,8 +289,8 @@ To import from multiple modules use multiple `composes:` rules.
269
289
270
290
``` css
271
291
:local(.className ) {
272
- composes : edit hightlight from " ./edit.css" ;
273
- composes : button from " module/button.css" ;
292
+ composes : edit hightlight from ' ./edit.css' ;
293
+ composes : button from ' module/button.css' ;
274
294
composes : classFromThisModule;
275
295
background : red ;
276
296
}
@@ -370,7 +390,7 @@ By default, the exported JSON keys mirror the class names. If you want to cameli
370
390
```
371
391
372
392
``` js
373
- const className = require ( ' file.css' ). className
393
+ import { className } from ' file.css' ;
374
394
```
375
395
376
396
<h2 align =" center " >Maintainer</h2 >
0 commit comments