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.

License

MIT