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

问题描述

我想使用[ { "type": "select","name": "searchBy","label": "Select","options": [ { "label": "ID","nested": [ { "name": "id","type": "number","label": "ID" } ] },{ "label": "Name","nested": [ { "name": "name","type": "text","label": "Name" } ] } ] } ] （这很重要-我不想使用<link>）标记来加载外部CSS（来自npm依赖项）。我正在使用HTMLWebpackPlugin。

我尝试过这样的事情：

<style>

但是Webpack一直用<link href="style!css!file!~@internal-scope/package-name/dist/some.css" rel="stylesheet" id="important-id"> 代替href。我认为是由Webpack尝试使用esModules引起的？但是，当我用[Object object]关闭esModule时，出现如下错误：

...!file?esModule=false!...

我还尝试仅使用 Module not found: Error: Can't resolve './' in (...) （如@felixmosh所建议的）-仍然与上述相同。

解决方法

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

css-loader加载CSS，并通过选择器映射+ CSS字符串向下传递对象。 style-loader注入css并返回相同的 object 。

因此，您得到[Object object]。

尝试仅使用file-loader，它返回带有静态文件路径的 string ，并将文件发射到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这样做呢？ （默认情况下，它会向{strong>发射的 CSS文件中注入link标签）