Skip to content

Instantly share code, notes, and snippets.

@rhoover

rhoover/eleventy-inline-css.txt

Created April 3, 2023 19:24
Show Gist options
  • Save rhoover/7a57e18d696717fe1bd9f5d08a0b787a to your computer and use it in GitHub Desktop.
Save rhoover/7a57e18d696717fe1bd9f5d08a0b787a to your computer and use it in GitHub Desktop.
Download ZIP
Eleventy Force Reload For Inlined CSS
Raw
eleventy-inline-css.txt
Let's say you have a head-element.njk template. There, or wherever your <head> element is, place:
<!-- critical styles -->
{% set critical %}
{% include "../../critical/critical.css" %}
{% endset %}
<style>
{{ critical | safe }}
</style>
And in your package.json, do this:
"watch:critical": "sass --style compressed --no-source-map --watch src/sass/critical.scss:src/critical/critical.css",
"watch:eleventy": "rm -rf dist && npx @11ty/eleventy --serve",
"serve": "npm-run-all --parallel watch:eleventy watch:critical"
And presto! Any saved changes to your critical-CSS .scss files are captured and re-rendered on the screen.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment