Is there a injectType=lazyStyleTag .use() & .unuse() equivalent when using css-loader + mini-css-extract-plugin

Documentation Is:

• [ X] Missing
• [ X] Needed
• [ X] Confusing
• Not Sure?

Please Explain in Detail…

We maintain a SPA that loads pages dynamically in response to hash state changes. For page routing, we use the “Dynamic expressions in import()” feature to import individual page chunks (each chunk consists of HTML, JS and LESS). To apply the page’s specific less, we imports page-styles.less using injectType=lazyStyleTag and call.use() & .unuse() when the page is loaded & unloaded respectively (avoids CSS conflicts between individual pages). To apply the page’s HTML, we insert/remove from a HTML container element.

We’d like the flexibility of using css-loader + mini-css-extract-plugin (without style-loader) for production builds. Is there another way of achieving the dynamic use/unuse functionality in webpack 5? Perhaps there’s some special syntax supported by html-loader that allows importing less files in HTML, resolving to either a <link href=“.css” rel=“stylesheet”> tag in production mode (.css chunk file per page), or <styles> tags in development. This works as a unuse() equivalent as the styling would be automatically removed when the HTML is removed from container element.

Secondly, is there a way to supply injectType=lazyStyleTag (either as configuration or inline option) to style-loader without renaming all .less to .lazy.less? We want the default for our non-lazy less files to be injectType=styleTag, so we’re currently specifying verbosely as : import styles from '!style-loader?injectType=lazyStyleTag!css-loader!less-loader!./styles.less';

Your Proposal for Changes

If the recommendation for production builds is not to use the style-loader, alternative dynamic css (loaded/unloaded on demand) strategies should be promoted over using style-loader’s injectType=lazyStyleTag .use() & unuse().

If there’s a cleaner way to import lazy styles (config or inline) without .less renames, please include details.

[andy1547]

@zongzi531 To import LESS and CSS files, in a lazy and non-lazy fashion:

// lazy, need to call use / unuse on these
import lazyStyleA from "a.less?lazy";
import lazyStyleB from "b.css?lazy";
// none lazy imports, applied globally.
import "c.less";
import "d.css";

Webpack config required for this:

            {
                    test: /\.less$/i,
                    resourceQuery: /lazy/,
                    use: [
                        { loader: "style-loader", options: { injectType: "lazyStyleTag" } },
                        "css-loader",
                        "less-loader",
                    ],
                },            
                {
                    test: /\.less$/i,
                    resourceQuery: { not: /lazy/ },
                    use: [
                        "style-loader",
                        "css-loader",
                        "less-loader",
                    ],
                },
                {
                    test: /\.css$/i,
                    resourceQuery: /lazy/,
                    use: [
                        { loader: "style-loader", options: { injectType: "lazyStyleTag" } },
                        "css-loader",
                    ],
                }, 
                {
                    test: /\.css$/i,
                    resourceQuery: { not: /lazy/ },
                    use: [
                        'style-loader', 
                        'css-loader'
                    ]
                },

[andy1547]

That has done the trick, thanks!