使用 <link> 标记和 HTMLWebpackPlugin 加载 CSS
Load CSS with <link> tag and HTMLWebpackPlugin
我想使用 <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？但是当我使用 ...!file?esModule=false!... 关闭 esModule 时，我收到如下错误：
Module not found: Error: Can't resolve './' in (...)
我也尝试只使用 file-loader（正如@felixmosh 所建议的）——仍然是与上面相同的问题。
在您的情况下，链接 css-loader 和 style-loader 不相关。
css-loader 加载 css 并向下传递带有选择器映射 + css 字符串的 对象 。
style-loader 注入 css 和 returns 相同的 object.
因此，您得到 [Object object]。
尝试只使用 file-loader，其中 returns 一个带有静态文件路径的 字符串 ，并将文件发送到 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 文件）
我想使用 <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？但是当我使用 ...!file?esModule=false!... 关闭 esModule 时，我收到如下错误：
Module not found: Error: Can't resolve './' in (...)
我也尝试只使用 file-loader（正如@felixmosh 所建议的）——仍然是与上面相同的问题。
在您的情况下，链接 css-loader 和 style-loader 不相关。
css-loader 加载 css 并向下传递带有选择器映射 + css 字符串的 对象 。
style-loader 注入 css 和 returns 相同的 object.
因此，您得到 [Object object]。
尝试只使用 file-loader，其中 returns 一个带有静态文件路径的 字符串 ，并将文件发送到 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 文件）