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

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 <style>标签中注入缩小的 CSS 。

我正在寻找第三步。

我尝试了以下 npm 包：

• inlineCss ：代替内联样式到每个元素中。
• Styliner ：似乎坏了。

Answer 1

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

内联 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运行它。

Answer 2

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

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

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