- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi everyone,
Is anyone aware of a Grunt plugin that takes a CSS file and inlines it into the head
of the page (pre-processed)?
...
<head>
...
<!-- from css/critical.css -->
<style>body { background: red };</style>
...
</head>
...
Instead of:
...
<head>
...
<link rel="stylesheet" href="css/critical.css">
...
</head>
...
I’ve seen a couple of websites that do this, but I can’t find the name of the Grunt plugin that does it. I’m also using PostCSS, so a plugin for that would be great, too.
Cheers!
There is this grunt-copy plugin that I use for inlining CSS in a style-block. So in gruntfile.js
within a “copy task” one can copy anything and rename it to something else. Like, for example, copy a prefixed and minified build/css/critical.min.css
file to build/inc/critical-css.inc
.
Maybe you don’t need this but anyway: a PHP-include within those style tags can output this with the.inc
suffix. Or in a template language like twig:
{% if page.page_type == "post" %}<style>{% include "build/inc/critical-css.inc" %}</style>{% endif %}
Hi Atelierbram
I’m using Pug as my templating language. The thought to simply include the file via that didn’t even cross my mind. Thank you, it’s now working exactly how I wanted.
style(type='text/css')
include ../../staging/css/critical.css
Thank you for your help,
Morgan