Page specific scss

Support Themes & Styling
1

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?

2

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) %}

or

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

Look at Asset Manager Documentation for more information.

1 Like
3

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

4

Can you share an example from an existing theme?

5

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 https://github.com/leafo/scssphp/

There is a plugin for Grav https://github.com/getgrav/grav-plugin-scss that use Leafo\ScssPhp\Compiler

then you can have dynamic compilation otherwise use https://learn.getgrav.org/themes/customization#custom-scss-less

hope it helps

6

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

7

Maybe this will help?
http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet

8

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.