@@ -23,16 +23,11 @@ npm install --save-dev css-loader
2323
2424<h2 align =" center " >Usage</h2 >
2525
26- ** require**
27- ``` js
28- const css = require (' css!./file.css' )
29- ```
26+ Use the loader either via your webpack config, CLI or inline.
3027
31- ** webpack.config.js**
32- ``` js
33- const css = require (' file.css' )
34- ```
28+ ### Via webpack config (recommended)
3529
30+ ** webpack.config.js**
3631``` js
3732module .exports = {
3833 module: {
@@ -43,17 +38,42 @@ module.exports = {
4338 }
4439 ]
4540 }
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' ;
4758```
4859
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.
5070Good loaders for requiring your assets are the [ file-loader] ( https://github.com/webpack/file-loader )
5171and the [ url-loader] ( https://github.com/webpack/url-loader ) which you should specify in your config (see below).
5272
5373To be compatible with existing css files (if not in CSS Module mode):
5474
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' ) `
5777
5878<h2 align =" center " >Options</h2 >
5979
@@ -68,7 +88,7 @@ To be compatible with existing css files (if not in CSS Module mode):
6888| ** ` camelCase ` ** | ` false ` | Export Classnames in CamelCase|
6989| ** ` importLoaders ` ** | ` 0 ` | Number of loaders applied before CSS loader|
7090
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.
7292
7393** webpack.config.js**
7494``` js
@@ -107,17 +127,17 @@ rules: [
107127 {
108128 test: / \. css$ / ,
109129 use: [
110- " style-loader" ,
130+ ' style-loader' ,
111131 {
112- loader: " css-loader" ,
113- options: { root: " . " }
132+ loader: ' css-loader' ,
133+ options: { root: ' . ' }
114134 }
115135 ]
116136 }
117137]
118138```
119139
120- * ` url(/image.png) ` => ` require(" ./image.png" ) `
140+ * ` url(/image.png) ` => ` require(' ./image.png' ) `
121141
122142Using 'Root-relative' urls is not recommended. You should only use it for legacy CSS files.
123143
@@ -151,8 +171,8 @@ The loader replaces local selectors with unique identifiers. The choosen unique
151171
152172``` js
153173exports .locals = {
154- className: " _23_aKvs-b8bW2Vg3fwHozO" ,
155- subClass: " _13LGdX8RMStbBE9w-t0gZ1"
174+ className: ' _23_aKvs-b8bW2Vg3fwHozO' ,
175+ subClass: ' _13LGdX8RMStbBE9w-t0gZ1'
156176}
157177```
158178
@@ -231,8 +251,8 @@ This doesn't result in any change to the CSS itself but exports multiple class n
231251
232252``` js
233253exports .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'
236256}
237257```
238258
@@ -253,14 +273,14 @@ To import a local class name from another module:
253273
254274``` css
255275:local(.continueButton ) {
256- composes : button from " library/button.css" ;
276+ composes : button from ' library/button.css' ;
257277 background : red ;
258278}
259279```
260280
261281``` css
262282:local(.nameEdit ) {
263- composes : edit highlight from " ./edit.css" ;
283+ composes : edit highlight from ' ./edit.css' ;
264284 background : red ;
265285}
266286```
@@ -269,8 +289,8 @@ To import from multiple modules use multiple `composes:` rules.
269289
270290``` css
271291: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' ;
274294 composes : classFromThisModule;
275295 background : red ;
276296}
@@ -370,7 +390,7 @@ By default, the exported JSON keys mirror the class names. If you want to cameli
370390```
371391
372392``` js
373- const className = require ( ' file.css' ). className
393+ import { className } from ' file.css' ;
374394```
375395
376396<h2 align =" center " >Maintainer</h2 >
0 commit comments