Page specific scss

I am writing some page twig templates and I would like to compile a page-specific scss and add it to assets

Any way to do this?

You can compile the SCSS with whatever toolkit you use, eventually you will be adding the compiled assets to the Twig templates.

Assets (like Javascript and CSS) can be added to Twig templates using

{% do assets.addCss('theme://css/pure-0.5.0/grids-min.css', 103) %}


{% do assets.addJs('theme://js/html5shiv-printshiv.min.js') %}

Look at Asset Manager Documentation for more information.

1 Like

Hi, thanks for reply. I know how to use the Asset Manager but I don’t know ho to make Grav compile the script before the template load just how it works normally with themes

Can you share an example from an existing theme?

hi @manuel_84

I don’t think Grav compile scss by itself, Gantry can if i’m right, but i’m not a Gantry guru.
You have to make your own plugin using a scss compiler class like

There is a plugin for Grav that use Leafo\ScssPhp\Compiler

then you can have dynamic compilation otherwise use

hope it helps

Thank you I’ll dig more into Gantry to see if I can use its compiler.
Actually I am making a Hydrogen’s child theme

Maybe this will help?

The problem is that now in Grav twig files we can add css files with the Asset Manager, but not scss files.
I would like my scss to be added only for specific templates and not compiled with all the rest.