Skip to content

Commit 1703721

Browse files
philipbordallomichael-ciniawsky
authored andcommitted
docs(README): add more context to localIdentName (#711)
1 parent 1c51265 commit 1703721

File tree

1 file changed

+39
-36
lines changed

1 file changed

+39
-36
lines changed

README.md

+39-36
Original file line numberDiff line numberDiff line change
@@ -99,11 +99,11 @@ It's useful when you, for instance, need to post process the CSS as a string.
9999
|**[`alias`](#alias)**|`{Object}`|`{}`|Create aliases to import certain modules more easily|
100100
|**[`import`](#import)** |`{Boolean}`|`true`| Enable/Disable @import handling|
101101
|**[`modules`](#modules)**|`{Boolean}`|`false`|Enable/Disable CSS Modules|
102+
|**[`localIdentName`](#localidentname)**|`{String}`|`[hash:base64]`|Configure the generated ident|
102103
|**[`minimize`](#minimize)**|`{Boolean\|Object}`|`false`|Enable/Disable minification|
103104
|**[`sourceMap`](#sourcemap)**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
104105
|**[`camelCase`](#camelcase)**|`{Boolean\|String}`|`false`|Export Classnames in CamelCase|
105106
|**[`importLoaders`](#importloaders)**|`{Number}`|`0`|Number of loaders applied before CSS loader|
106-
|**`localIdentName`**|`{String}`|`[hash:base64]`|Configure the generated ident|
107107

108108
### `root`
109109

@@ -238,41 +238,6 @@ file.png => ./file.png
238238
```
239239

240240
You can use `:local(#someId)`, but this is not recommended. Use classes instead of ids.
241-
You can configure the generated ident with the `localIdentName` query parameter (default `[hash:base64]`).
242-
243-
**webpack.config.js**
244-
```js
245-
{
246-
test: /\.css$/,
247-
use: [
248-
{
249-
loader: 'css-loader',
250-
options: {
251-
modules: true,
252-
localIdentName: '[path][name]__[local]--[hash:base64:5]'
253-
}
254-
}
255-
]
256-
}
257-
```
258-
259-
You can also specify the absolute path to your custom `getLocalIdent` function to generate classname based on a different schema. This requires `webpack >= 2.2.1` (it supports functions in the `options` object).
260-
261-
**webpack.config.js**
262-
```js
263-
{
264-
loader: 'css-loader',
265-
options: {
266-
modules: true,
267-
localIdentName: '[path][name]__[local]--[hash:base64:5]',
268-
getLocalIdent: (context, localIdentName, localName, options) => {
269-
return 'whatever_random_class_name'
270-
}
271-
}
272-
}
273-
```
274-
275-
> :information_source: 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.
276241

277242
#### `Composing`
278243

@@ -339,6 +304,44 @@ To import from multiple modules use multiple `composes:` rules.
339304
}
340305
```
341306

307+
### `localIdentName`
308+
309+
You can configure the generated ident with the `localIdentName` query parameter. See [loader-utils's documentation](https://github.com/webpack/loader-utils#interpolatename) for more information on options.
310+
311+
**webpack.config.js**
312+
```js
313+
{
314+
test: /\.css$/,
315+
use: [
316+
{
317+
loader: 'css-loader',
318+
options: {
319+
modules: true,
320+
localIdentName: '[path][name]__[local]--[hash:base64:5]'
321+
}
322+
}
323+
]
324+
}
325+
```
326+
327+
You can also specify the absolute path to your custom `getLocalIdent` function to generate classname based on a different schema. This requires `webpack >= 2.2.1` (it supports functions in the `options` object).
328+
329+
**webpack.config.js**
330+
```js
331+
{
332+
loader: 'css-loader',
333+
options: {
334+
modules: true,
335+
localIdentName: '[path][name]__[local]--[hash:base64:5]',
336+
getLocalIdent: (context, localIdentName, localName, options) => {
337+
return 'whatever_random_class_name'
338+
}
339+
}
340+
}
341+
```
342+
343+
> ℹ️ 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.
344+
342345
### `minimize`
343346

344347
By default the css-loader minimizes the css if specified by the module system.

0 commit comments

Comments
 (0)