Вставьте файл CSS в заголовок HTML, заменив тег <link>

Question

Я ищу (npm?) Решение, которое просто заменит:

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

на

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

в качестве простого шага сборки для создания облегченный сайт c. Я нашел тонну (часто неработающих) пакетов, которые вставляют CSS в каждый элемент DOM, а это , а не , что я хочу.

Мой конвейер сборки выглядит следующим образом:

1. Компилировать SASS (минимизировано)
2. Минифицировать HTML
3. Минимизировать инъекцию CSS в HTML <style> тег .

Я ищу третий шаг.

Я попробовал следующие пакеты npm:

• inlineCss: делает встроенный стиль в каждом элементе вместо этого.
• Styliner: кажется сломанным.

Answer 1

У меня было точно такое же требование. Вот что я сделал. Я использую Gulp, чтобы:

1. Компилировать файлы Sass в CSS
2. Вставить теги ссылок в файл HTML, чтобы мне не пришлось добавлять его в HTML файл
3. Затем с помощью этих тегов ссылок я получаю источник href файла CSS, извлекаю содержимое этого файла CSS и затем внедряю файлы CSS ' содержимое файла HTML, заменяющего оригинальный тег ссылки.

Просмотрите полный файл gulp здесь . Я выполняю это с помощью команды 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.