Skip to content

Commit

Permalink
docs(README): add more context to localIdentName (#711)
Browse files Browse the repository at this point in the history
  • Loading branch information
philipbordallo authored and michael-ciniawsky committed May 5, 2018
1 parent 1c51265 commit 1703721
Showing 1 changed file with 39 additions and 36 deletions.
75 changes: 39 additions & 36 deletions README.md
Expand Up @@ -99,11 +99,11 @@ It's useful when you, for instance, need to post process the CSS as a string.
|**[`alias`](#alias)**|`{Object}`|`{}`|Create aliases to import certain modules more easily|
|**[`import`](#import)** |`{Boolean}`|`true`| Enable/Disable @import handling|
|**[`modules`](#modules)**|`{Boolean}`|`false`|Enable/Disable CSS Modules|
|**[`localIdentName`](#localidentname)**|`{String}`|`[hash:base64]`|Configure the generated ident|
|**[`minimize`](#minimize)**|`{Boolean\|Object}`|`false`|Enable/Disable minification|
|**[`sourceMap`](#sourcemap)**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
|**[`camelCase`](#camelcase)**|`{Boolean\|String}`|`false`|Export Classnames in CamelCase|
|**[`importLoaders`](#importloaders)**|`{Number}`|`0`|Number of loaders applied before CSS loader|
|**`localIdentName`**|`{String}`|`[hash:base64]`|Configure the generated ident|

### `root`

Expand Down Expand Up @@ -238,41 +238,6 @@ file.png => ./file.png
```

You can use `:local(#someId)`, but this is not recommended. Use classes instead of ids.
You can configure the generated ident with the `localIdentName` query parameter (default `[hash:base64]`).

**webpack.config.js**
```js
{
test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}
]
}
```

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).

**webpack.config.js**
```js
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]',
getLocalIdent: (context, localIdentName, localName, options) => {
return 'whatever_random_class_name'
}
}
}
```

> :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.

#### `Composing`

Expand Down Expand Up @@ -339,6 +304,44 @@ To import from multiple modules use multiple `composes:` rules.
}
```

### `localIdentName`

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.

**webpack.config.js**
```js
{
test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}
]
}
```

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).

**webpack.config.js**
```js
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]',
getLocalIdent: (context, localIdentName, localName, options) => {
return 'whatever_random_class_name'
}
}
}
```

> ℹ️ 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.
### `minimize`

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

0 comments on commit 1703721

Please sign in to comment.