Injects actual CSS rules into link's href (with injectType: "linkTag")

[Konrud]

style-loader injects actual css rules into href attribute of the link tag with injectType: "linkTag" option set

• Operating System: Windows 10
• Node Version: v14.15.1
• NPM Version: 6.14.8
• webpack Version: 5.11.1
• style-loader Version: 2.0.0

Expected Behavior

The loader should dynamically insert the tag at runtime via JavaScript.

Actual Behavior

injects actual css rules into href attribute of the <link>

example

<link rel="stylesheet" href=".o-btn {
    padding: .5rem 1rem;
    font-size: 1rem;
}
/*# sourceURL=webpack://./src/components/Button/style.css */
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9jb21wb25lbnRzL0J1dHRvbi9zdHlsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSSxtQkFBbUI7SUFDbkIsZUFBZTtBQUNuQiIsInNvdXJjZXNDb250ZW50IjpbIi5vLWJ0biB7XHJcbiAgICBwYWRkaW5nOiAuNXJlbSAxcmVtO1xyXG4gICAgZm9udC1zaXplOiAxcmVtO1xyXG59Il0sInNvdXJjZVJvb3QiOiIifQ== */">

Code

module.exports = {
    entry: path.resolve(__dirname, "./src/index.js"),
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/i,
                exclude: /node_modules/,
                use: ["babel-loader"]
            },
            {
                test: /\.(css)$/i,
                exclude: /node_modules/,
                use: [
                    { loader: "style-loader", options: { injectType: "linkTag" } },
                    { loader: "css-loader", options: { sourceMap: true } },
                ]
            },
            {
                test: /\.(png|jpe?g|bmp|webp|gif)$/i,
                exclude: /node_modules/,
                use: [
                    { loader: "file-loader" }
                ]
            },
        ]
    },
    resolve: {
        extensions: ["*", ".js", ".jsx"]
    },
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
    devServer: {
        contentBase: path.resolve(__dirname, "./dist"),
        hot: true
    }
}

How Do We Reproduce?

I just installed both style-loader and css-loader via npm. declared import "./style.css"; in my component's js file, and that's it.

[alexander-akait]

You should use linkTag only with file-loader or assets modules

[alexander-akait]

We need improve docs