Skip to content

Commit 5735e5d

Browse files
authored
Implement feedback from other loader readme's
1 parent 85a2156 commit 5735e5d

File tree

1 file changed

+46
-26
lines changed

1 file changed

+46
-26
lines changed

README.md

+46-26
Original file line numberDiff line numberDiff line change
@@ -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
3732
module.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.
5070
Good loaders for requiring your assets are the [file-loader](https://github.com/webpack/file-loader)
5171
and the [url-loader](https://github.com/webpack/url-loader) which you should specify in your config (see below).
5272

5373
To 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

122142
Using '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
153173
exports.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
233253
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'
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

Comments
 (0)