通过替换 <link> 标签在 HTML 头部注入 CSS 文件

Question

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

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

与

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

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

我的构建管道如下所示：

1. 编译 SASS（缩小）
2. 缩小 HTML
3. 在 HTML <style> 标签中注入缩小的 CSS。

我正在寻找第三步。

我尝试了以下 npm 包：

• inlineCss: 改为在每个元素中添加内联样式。
• Styliner：好像坏了。

Answer 1

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

1. 将 Sass 文件编译成 CSS
2. 将链接标签注入到 HTML 文件中，这样我就不必手动将其添加到 HTML 文件中了
3. 然后借助这些链接标签，我得到了CSS文件的href源， 获取这个 CSS 文件的内容，然后注入 CSS 文件 将内容放入 HTML 文件中，替换原始链接标记。

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

Answer 2

目前，我通过制作一个非常基本的替换脚本来解决这个问题；但它有效：

inline-css.js：

const fs = require('fs');

const html = fs.readFileSync('dist/index.html', 'utf8');
const css = fs.readFileSync('dist/style.css', 'utf8');

const inlinedHtml = html.replace(
    '<link rel="stylesheet"href="style.css"type="text/css"charset="utf-8">',
    "<style>" + css + "</style>");

fs.writeFileSync('dist/index.inlined.html', inlinedHtml);

然后使用$ node inline-css.js 运行它。