用<link>标记和HTMLWebpackPlugin加载CSS

Question

我想使用<link> (这很重要--我不想使用<style>)标记来加载外部CSS (来自npm依赖项)。我在用HTMLWebpackPlugin。

我试过这样的方法：

<link href="style!css!file!~@internal-scope/package-name/dist/some.css" rel="stylesheet" id="important-id">

但Webpack继续用[Object object]取代href。我认为这是Webpack试图使用esModules的原因吗？但是，当我用esModule关闭...!file?esModule=false!...时，会出现以下错误：

 Module not found: Error: Can't resolve './' in (...)

此外，我还试图只使用file-loader (正如@felixmosh所提议的那样)--仍然与上面的问题相同。

Answer 1

在您的例子中，链接css-loader和style-loader并不相关。

css-loader加载css并传递带有选择器映射+ css字符串的对象。style-loader注入css并返回相同的对象。

因此，您可以得到[Object object]。

尝试只使用file-loader，它返回带有静态文件路径的字符串，并将该文件发送到outputPath。

<link href="!!file?esModule=false!~@internal-scope/package-name/dist/some.css" rel="stylesheet" id="important-id">
// ---------^ these !! are important to prevent from running rest of the loaders which are suitable from your config.

顺便问一下，为什么要将它直接注入模板，而不是在js中导入它，让HTMLWebpack来完成它呢？(默认情况下，将link标记注入到发出的 css文件中)