style-with-extract-loader
v4.1.4
Published
Base on style-loader, which also extracts style content to files. Developed for web page record and replay optimization.
Downloads
9
Readme
style-with-extract-loader
Inject CSS into the DOM with extracting capability. Base on style-loader, which also extracts style content to files. Developed for web page record and replay optimization.
Only works when build mode is 'production' and hmr is disabled.
Getting Started
To begin, you'll need to install style-with-extract-loader
:
npm install --save-dev style-with-extract-loader
or
yarn add -D style-with-extract-loader
or
pnpm add -D style-with-extract-loader
It's recommended to combine style-with-extract-loader
with the css-loader
Then add the loader to your webpack
config. For example:
style.css
body {
background: green;
}
component.js
import "./style.css";
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-with-extract-loader",
options: {
extract: true,
attributesKey: "data-custom-attribute-key",
publicPath: "/",
filename: "[id].[contenthash:8].css",
},
},
"css-loader",
],
},
],
},
};
The injected style tag will be like this:
<style data-custom-attribute-key="/123.xxxxxxxx.css">
body {
background: green;
}
</style>
Options
- injectType
- attributes
- insert
- styleTagTransform
- base
- esModule
- extract
- attributesKey
- publicPath
- filename
More Information
When turn off the extracting feature, This loader is just as same as style-loader. So you can read more information about the loader in style-loader doc page.