You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using [local scoped CSS](https://github.com/webpack/css-loader#css-scope) the module exports the generated identifiers (locals):
|**`injectType`**|`{String}`|`styleTag`| Allows to setup how styles will be injected into the DOM |
67
+
|**`attributes`**|`{Object}`|`{}`| Adds custom attributes to tag |
68
+
|**`insert`**|`{String\|Function}`|`head`| Inserts tag at the given position into the DOM |
69
+
|**`base`**|`{Number}`|`true`| Sets module ID base (DLLPlugin) |
82
70
83
71
### `injectType`
84
72
85
73
Type: `String`
86
74
Default: `styleTag`
87
75
88
-
Allows to setup how styles will be injected into DOM.
76
+
Allows to setup how styles will be injected into the DOM.
89
77
90
78
Possible values:
91
79
@@ -95,60 +83,29 @@ Possible values:
95
83
-`lazySingletonStyleTag`
96
84
-`linkTag`
97
85
98
-
When you `lazyStyleTag` or `lazySingletonStyleTag` value the `style-loader` injects the styles lazily making them useable on-demand via `style.use()` / `style.unuse()`.
86
+
#### `styleTag`
87
+
88
+
Automatically injects styles into the DOM using multiple `<style></style>`. It is **default** behaviour.
99
89
100
90
**component.js**
101
91
102
92
```js
103
-
importstylefrom'./file.css';
104
-
105
-
style.use();
106
-
style.unuse();
93
+
import'./styles.css';
107
94
```
108
95
109
-
We recommend following `.lazy.css` naming convention for lazy styles and the `.css` for basic `style-loader` usage (similar to other file types, i.e. `.lazy.less` and `.less`).
96
+
Example with c Locals (CSS Modules):
110
97
111
-
**webpack.config.js**
98
+
**component-with-css-modules.js**
112
99
113
100
```js
114
-
module.exports= {
115
-
module: {
116
-
rules: [
117
-
{
118
-
test:/\.css$/i,
119
-
exclude:/\.lazy\.css$/i,
120
-
use: ['style-loader', 'css-loader'],
121
-
},
122
-
{
123
-
test:/\.lazy\.css$/i,
124
-
use: [
125
-
{
126
-
loader:'style-loader',
127
-
options: {
128
-
// Can be `'lazyStyleTag'` or `'lazySingletonStyleTag'`
129
-
injectType:'lazyStyleTag',
130
-
},
131
-
},
132
-
'css-loader',
133
-
],
134
-
},
135
-
],
136
-
},
137
-
};
138
-
```
139
-
140
-
Styles are not added on `import/require()`, but instead on call to `use`. Styles are removed from page if `unuse` is called exactly as often as `use`.
141
-
142
-
> ⚠️ Behavior is undefined when `unuse` is called more often than `use`. Don't do that.
143
-
144
-
#### `styleTag`
145
-
146
-
Injects styles in multiple `<style></style>`. It is **default** behaviour.
101
+
importstylesfrom'./styles.css';
147
102
148
-
```js
149
-
import'./styles.css';
103
+
constdivElement=document.createElement('div');
104
+
divElement.className=styles['my-class'];
150
105
```
151
106
107
+
All locals (class names) stored in imported object.
108
+
152
109
**webpack.config.js**
153
110
154
111
```js
@@ -158,6 +115,7 @@ module.exports = {
158
115
{
159
116
test:/\.css$/i,
160
117
use: [
118
+
// The `injectType` option can be avoided because it is default behaviour
@@ -184,14 +142,27 @@ The loader inject styles like:
184
142
185
143
#### `singletonStyleTag`
186
144
187
-
Injects styles in one `<style></style>`.
145
+
Automatically injects styles into the DOM using one `<style></style>`.
188
146
189
147
> ⚠ Source maps do not work.
190
148
149
+
**component.js**
150
+
191
151
```js
192
152
import'./styles.css';
193
153
```
194
154
155
+
**component-with-css-modules.js**
156
+
157
+
```js
158
+
importstylesfrom'./styles.css';
159
+
160
+
constdivElement=document.createElement('div');
161
+
divElement.className= styles['my-class'];
162
+
```
163
+
164
+
All locals (class names) stored in imported object.
165
+
195
166
**webpack.config.js**
196
167
197
168
```js
@@ -228,20 +199,46 @@ The loader inject styles like:
228
199
229
200
#### `lazyStyleTag`
230
201
231
-
Injects styles in multiple `<style></style>` on demand (documentation above).
202
+
Injects styles into the DOM using multiple `<style></style>` on demand.
203
+
We recommend following `.lazy.css` naming convention for lazy styles and the `.css` for basic `style-loader` usage (similar to other file types, i.e. `.lazy.less` and `.less`).
204
+
When you `lazyStyleTag` value the `style-loader` injects the styles lazily making them useable on-demand via `style.use()` / `style.unuse()`.
205
+
206
+
> ⚠️ Behavior is undefined when `unuse` is called more often than `use`. Don't do that.
207
+
208
+
**component.js**
209
+
210
+
```js
211
+
importstylesfrom'./styles.lazy.css';
212
+
213
+
styles.use();
214
+
// For removing styles you can use
215
+
// styles.unuse();
216
+
```
217
+
218
+
**component-with-css-modules.js**
232
219
233
220
```js
234
-
importstylesfrom'./styles.css';
221
+
importstylesfrom'./styles.lazy.css';
235
222
236
223
styles.use();
224
+
225
+
constdivElement=document.createElement('div');
226
+
divElement.className=styles.locals['my-class'];
237
227
```
238
228
229
+
All locals (class names) stored in `locals` property of imported object.
230
+
239
231
**webpack.config.js**
240
232
241
233
```js
242
234
module.exports= {
243
235
module: {
244
236
rules: [
237
+
{
238
+
test:/\.css$/i,
239
+
exclude:/\.lazy\.css$/i,
240
+
use: ['style-loader', 'css-loader'],
241
+
},
245
242
{
246
243
test:/\.lazy\.css$/i,
247
244
use: [
@@ -271,29 +268,52 @@ The loader inject styles like:
271
268
272
269
#### `lazySingletonStyleTag`
273
270
274
-
Injects styles in one `<style></style>` on demand (documentation above).
271
+
Injects styles into the DOM using one `<style></style>` on demand.
272
+
We recommend following `.lazy.css` naming convention for lazy styles and the `.css` for basic `style-loader` usage (similar to other file types, i.e. `.lazy.less` and `.less`).
273
+
When you `lazySingletonStyleTag` value the `style-loader` injects the styles lazily making them useable on-demand via `style.use()` / `style.unuse()`.
274
+
275
+
> ⚠️ Source maps do not work.
275
276
276
-
> ⚠ Source maps do not work.
277
+
> ⚠️ Behavior is undefined when `unuse` is called more often than `use`. Don't do that.
278
+
279
+
**component.js**
277
280
278
281
```js
279
282
importstylesfrom'./styles.css';
280
283
281
284
styles.use();
285
+
// For removing styles you can use
286
+
// styles.unuse();
282
287
```
283
288
289
+
**component-with-css-modules.js**
290
+
291
+
```js
292
+
importstylesfrom'./styles.lazy.css';
293
+
294
+
styles.use();
295
+
296
+
constdivElement=document.createElement('div');
297
+
divElement.className=styles.locals['my-class'];
298
+
```
299
+
300
+
All locals (class names) stored in `locals` property of imported object.
0 commit comments