Skip to content

Commit 9a3328c

Browse files
committed
docs: add docs for insertInto option
1 parent 56dabe7 commit 9a3328c

File tree

1 file changed

+17
-0
lines changed

1 file changed

+17
-0
lines changed

README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -356,6 +356,23 @@ const miniCssExtractPlugin = new MiniCssExtractPlugin({
356356

357357
For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`.
358358

359+
#### Determining Insertion Point for Async CSS Chunks
360+
361+
If you are extracting CSS into separate files and using Webpack Dynamic Imports, it is possible you will need to be able to configure the insertion point of your async CSS chunks in the document to preserve ordering for the CSS cascade. This is possible using the `insertInto` option, which takes a function that will be called to determine the parent node into which to insert the `<link>`` tag for the chunk CSs file
362+
363+
```javascript
364+
module.exports = {
365+
...
366+
plugins: [
367+
new MiniCssExtractPlugin({
368+
filename: "[name].css",
369+
insertInto: href => document.querySeletor('.async-styles-container'),
370+
})
371+
],
372+
...
373+
}
374+
```
375+
359376
### Remove Order Warnings
360377

361378
If the terminal is getting bloated with chunk order warnings. You can filter by configuring [warningsFilter](https://webpack.js.org/configuration/stats/) withing the webpack stats option

0 commit comments

Comments
 (0)