javascript - 通过替换 <link> 标签将 CSS 文件注入(inject) HTML head

Question

我正在寻找一个(基于 npm？)的解决方案，可以简单地替换:

<link rel='stylesheet' href='style.css'>

与

<style><!-- actual contents of the style.css file here --></style>

作为制作轻量级静态网站的简单构建步骤。我发现大量(通常是损坏的)包将 CSS 内联到 DOM 中的每个元素中，这不是我想要的。

我的构建管道如下所示:

1. 编译 SASS(缩小版)
2. 缩小 HTML
3. 在 HTML 中注入(inject)缩小的 CSS <style>标签。

我正在寻找第三步。

我尝试了以下 npm 包:

• inlineCss :将内联样式改为每个元素。
• Styliner : 好像坏了。

Answer 1

我有完全相同的要求。这就是我所做的。我使用 Gulp 来:

1. 将 Sass 文件编译为 CSS
2. 将链接标记插入 HTML 文件，这样我就不必手动将其添加到 HTML 文件中
3. 然后在这些链接标签的帮助下，我得到了CSS文件的href源， 获取此 CSS 文件的内容，然后注入(inject) CSS 文件' 将内容替换为 HTML 文件中的原始链接标记。

查看完整的 gulp 文件 here 。我使用命令 gulp build 执行此操作，该命令运行上述所有步骤(链接文件的第 37 行)。