Skip to content

Commit b82f0f7

Browse files
author
Alexandru Rosianu
committed
Update README.md
1 parent 121efeb commit b82f0f7

File tree

1 file changed

+13
-212
lines changed

1 file changed

+13
-212
lines changed

‎README.md

Lines changed: 13 additions & 212 deletions
Original file line numberDiff line numberDiff line change
@@ -1,231 +1,32 @@
11
# css loader for webpack
22

3-
## installation
3+
I forked this module because I use it with SASS and webpack prerendering. Thus, modules didn't work and I kept getting this error message because the class names were different on the frontend than the ones in the backend:
44

5-
`npm install css-loader --save-dev`
6-
7-
## Usage
8-
9-
[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
10-
11-
``` javascript
12-
var css = require("css!./file.css");
13-
// => returns css code from file.css, resolves imports and url(...)
14-
```
15-
16-
`@import` and `url(...)` are interpreted like `require()` and will be resolved by the css-loader.
17-
Good loaders for requiring your assets are the [file-loader](https://github.com/webpack/file-loader)
18-
and the [url-loader](https://github.com/webpack/url-loader) which you should specify in your config (see below).
19-
20-
To be compatible with existing css files (if not in CSS Module mode):
21-
* `url(image.png)` => `require("./image.png")`
22-
* `url(~module/image.png)` => `require("module/image.png")`
23-
24-
### Example config
25-
26-
This webpack config can load css files, embed small png images as Data Urls and jpg images as files.
27-
28-
``` javascript
29-
module.exports = {
30-
module: {
31-
loaders: [
32-
{ test: /\.css$/, loader: "style-loader!css-loader" },
33-
{ test: /\.png$/, loader: "url-loader?limit=100000" },
34-
{ test: /\.jpg$/, loader: "file-loader" }
35-
]
36-
}
37-
};
38-
```
39-
40-
### 'Root-relative' urls
41-
42-
For urls that start with a `/`, the default behavior is to not translate them:
43-
* `url(/image.png)` => `url(/image.png)`
44-
45-
If a `root` query parameter is set, however, it will be prepended to the url
46-
and then translated:
47-
48-
With a config like:
49-
50-
``` javascript
51-
loaders: [
52-
{ test: /\.css$/, loader: "style-loader!css-loader?root=." },
53-
...
54-
]
55-
```
56-
57-
The result is:
58-
59-
* `url(/image.png)` => `require("./image.png")`
60-
61-
Using 'Root-relative' urls is not recommended. You should only use it for legacy CSS files.
62-
63-
### Local scope
64-
65-
By default CSS exports all class names into a global selector scope. This is a feature which offer a local selector scope.
66-
67-
The syntax `:local(.className)` can be used to declare `className` in the local scope. The local identifiers are exported by the module.
68-
69-
With `:local` (without brackets) local mode can be switched on for this selector. `:global(.className)` can be used to declare an explicit global selector. With `:global` (without brackets) global mode can be switched on for this selector.
70-
71-
The loader replaces local selectors with unique identifiers. The choosen unique identifiers are exported by the module.
72-
73-
Example:
74-
75-
``` css
76-
:local(.className) { background: red; }
77-
:local .className { color: green; }
78-
:local(.className .subClass) { color: green; }
79-
:local .className .subClass :global(.global-class-name) { color: blue; }
80-
```
81-
82-
is transformed to
83-
84-
``` css
85-
._23_aKvs-b8bW2Vg3fwHozO { background: red; }
86-
._23_aKvs-b8bW2Vg3fwHozO { color: green; }
87-
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 { color: green; }
88-
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 .global-class-name { color: blue; }
89-
```
90-
91-
and the identifiers are exported:
92-
93-
``` js
94-
exports.locals = {
95-
className: "_23_aKvs-b8bW2Vg3fwHozO",
96-
subClass: "_13LGdX8RMStbBE9w-t0gZ1"
97-
}
98-
```
99-
100-
Camelcasing is recommended for local selectors. They are easier to use in the importing javascript module.
101-
102-
`url(...)` URLs in block scoped (`:local .abc`) rules behave like requests in modules:
103-
* `./file.png` instead of `file.png`
104-
* `module/file.png` instead of `~module/file.png`
105-
106-
107-
You can use `:local(#someId)`, but this is not recommended. Use classes instead of ids.
108-
109-
You can configure the generated ident with the `localIdentName` query parameter (default `[hash:base64]`). Example: `css-loader?localIdentName=[path][name]---[local]---[hash:base64:5]` for easier debugging.
110-
111-
Note: For prerendering with extract-text-webpack-plugin you should use `css-loader/locals` instead of `style-loader!css-loader` **in the prerendering bundle**. It doesn't embed CSS but only exports the identifier mappings.
112-
113-
### CSS Modules
114-
115-
See [CSS Modules](https://github.com/css-modules/css-modules).
116-
117-
The query parameter `modules` enables the **CSS Modules** spec. (`css-loader?modules`)
118-
119-
This enables Local scoped CSS by default. (You can switch it off with `:global(...)` or `:global` for selectors and/or rules.)
120-
121-
### Composing CSS classes
122-
123-
When declaring a local class name you can compose a local class from another local class name.
124-
125-
``` css
126-
:local(.className) {
127-
background: red;
128-
color: yellow;
129-
}
130-
131-
:local(.subClass) {
132-
composes: className;
133-
background: blue;
134-
}
1355
```
136-
137-
This doesn't result in any change to the CSS itself but exports multiple class names:
138-
139-
``` js
140-
exports.locals = {
141-
className: "_23_aKvs-b8bW2Vg3fwHozO",
142-
subClass: "_13LGdX8RMStbBE9w-t0gZ1 _23_aKvs-b8bW2Vg3fwHozO"
143-
}
144-
```
145-
146-
and CSS is transformed to:
147-
148-
``` css
149-
._23_aKvs-b8bW2Vg3fwHozO {
150-
background: red;
151-
color: yellow;
152-
}
153-
154-
._13LGdX8RMStbBE9w-t0gZ1 {
155-
background: blue;
156-
}
6+
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
1577
```
1588

159-
### Importing local class names
9+
So I fixed it by adding 1 new parameter to localIdentName: `sourceHash`.
16010

161-
To import a local class name from another module:
11+
## Usage
16212

163-
``` css
164-
:local(.continueButton) {
165-
composes: button from "library/button.css";
166-
background: red;
167-
}
168-
```
13+
Use `[sourceHash]` or `[sourceHash:keyLen]` to make css-loader generate the same classes for the same localName and source code combination.
16914

170-
``` css
171-
:local(.nameEdit) {
172-
composes: edit highlight from "./edit.css";
173-
background: red;
174-
}
175-
```
15+
## Example
17616

177-
To import from multiple modules use multiple `composes:` rules.
178-
179-
``` css
180-
:local(.className) {
181-
composes: edit hightlight from "./edit.css";
182-
composes: button from "module/button.css";
183-
composes: classFromThisModule;
184-
background: red;
185-
}
18617
```
18+
const CSS_LOADER_PARAMS = `modules&localIdentName=${DEBUG ? '[dir]--[local]--[sourceHash:5]' : '[sourceHash]&minimize'}`;
18719
188-
### SourceMaps
189-
190-
To include SourceMaps set the `sourceMap` query param.
191-
192-
`require("css-loader?sourceMap!./file.css")`
193-
194-
I. e. the extract-text-webpack-plugin can handle them.
195-
196-
They are not enabled by default because they expose a runtime overhead and increase in bundle size (JS SourceMap do not). In addition to that relative paths are buggy and you need to use an absolute public path which include the server url.
197-
198-
### importing and chained loaders
20+
// Frontend
21+
loader: `style!css?${CSS_LOADER_PARAMS}&sourceMap!autoprefixer!${SASS_LOADER}`
19922
200-
The query parameter `importLoaders` allow to configure which loaders should be applied to `@import`ed resources.
201-
202-
`importLoaders` (int): That many loaders after the css-loader are used to import resources.
203-
204-
Examples:
205-
206-
``` js
207-
require("style-loader!css-loader?importLoaders=1!autoprefixer-loader!...")
208-
// => imported resources are handled this way:
209-
require("css-loader?importLoaders=1!autoprefixer-loader!...")
210-
211-
require("style-loader!css-loader!stylus-loader!...")
212-
// => imported resources are handled this way:
213-
require("css-loader!...")
23+
// Prerendered
24+
loader: `css/locals?${CSS_LOADER_PARAMS}!autoprefixer!${SASS_LOADER}`
21425
```
21526

216-
This may change in the future, when the module system (i. e. webpack) supports loader matching by origin.
217-
218-
### Minification
219-
220-
By default the css-loader minimizes the css if specified by the module system.
221-
222-
In some cases the minification is destructive to the css, so you can provide some options to it. clean-css is used for minification and you find a [list of options here](https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-programmatically). Just provide them as query parameter: i. e. `require("css-loader?-restructuring&compatibility")` to disable restructuring and enable compatibility mode.
223-
224-
You can also disable or enforce minification with the `minimize` query parameter.
225-
226-
`require("css-loader?minimize!./file.css")` (enforced)
27+
## Docs
22728

228-
`require("css-loader?-minimize!./file.css")` (disabled)
29+
[Original Docs](https://github.com/webpack/css-loader)
22930

23031
## License
23132

0 commit comments

Comments
 (0)