在没有 CSS 模块的情况下在 Webpack 5 中动态加载 CSS？

Question

我正在开发一个遗留项目（基于 jQuery）。通过简单地将样式标签附加到标题中，可以使用 Javascript 添加一些 CSS：

$("head").append("<link href='" + path + "' rel='stylesheet' type='text/css' media='screen' />")

我无法使用 CSS 模块重写代码，所以我想知道是否有一种方法可以捆绑使用 Webpack 5 通过 Javascript 注入的 CSS。

Answer 1

找到了一种使用 require.context 使其工作的方法。

下面的行使某个文件夹内的所有 js 文件都可用作构建依赖项：

var req_js = require.context("./components", true, /.js$/);

这实际上使用了它们（jQuery 代码就在那里，因为这个遗留项目正在使用 jQuery，重要的部分是 req_js(key))：

$.each(window.app.config.components, function(componentName) {

    req_js.keys().forEach(function(key){
        if (key.split('/')[1] === componentName) {
            req_js(key);  //this actually calls/uses these dependencies
        }
    });
)};

关于 require.context 的更多有趣的背景信息在这里：什么是`require.context`？