使用 <link> 标签和 HTMLWebpackPlugin 加载 CSS答案

【问题标题】：Load CSS with <link> tag and HTMLWebpackPlugin使用 <link> 标签和 HTMLWebpackPlugin 加载 CSS
【发布时间】：2021-01-13 21:10:10
【问题描述】：

我想使用<link>（这很重要——我不想使用<style>）标签来加载外部CSS（来自npm 依赖项）。我正在使用 HTMLWebpackPlugin。

我尝试过这样的事情：

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

但 Webpack 不断将 href 替换为 [Object object]。我认为这是因为 Webpack 正在尝试使用 esModules？但是当我使用 ...!file?esModule=false!... 关闭 esModule 时，我收到如下错误：

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

我也尝试只使用file-loader（正如@felixmosh 建议的那样） - 仍然是与上述相同的问题。

【问题讨论】：

标签： webpack css-loader webpack-style-loader html-webpack-plugin webpack-file-loader

【解决方案1】：

在您的情况下，链接 css-loader 和 style-loader 不相关。

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

因此，您会得到[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 标签注入到emitted css 文件）

【讨论】：

是的，我忘了提，我也试过这个。 esModule 再次出现问题以及我提到的这个奇怪的错误。
尝试指定内联选项，并标记这是唯一应该运行的加载程序（通过!!前缀）
我也试过了。广告。顺便说一句：默认标签是
您可以通过使用自定义模板并修改htmlWebpackPlugin.tags.headTags中的相关css来注入这个id。你有我可以玩的“演示”回购吗？
很遗憾没有。这是一个封闭的项目...：/ style-loader 还允许为标签设置自定义属性（attributes 属性）。我将使用这个样式加载器，让你知道它是否对我有用。