sassgrav

Setting up SCSS compilation in a custom theme in Grav CMS

Trying to get to grips with Grav and have created a completely new theme from scratch using (or in my early stages of understanding, basically copying) the bare minimum from the default Quark theme.

I have got the base files and folders in place but I am struggling to figure out what I am meant to do, to get the SCSS compilation working.

I am working on a CentOS 7 Linux server with Plesk installed.

I know there is probably different ways of theming in Grav but whilst I am learning the system, I want my custom theme to work like the Quark one. I have set up the scss folder in the theme folder along with the css-compiled folder for the compiled CSS to be moved into.

I have included a screenshot of the theme structure below (should this be of any use):

Grav theme folder structure

I am not sure if I need to be installing something on the server (Node.js/npm and Gulp.js for example) or if this should be happening automatically.

If I need to be setting something up on the server, then this will raise additional questions I think but I just need someone to point me in the right direction as I had no idea who/where to ask this...

If I point the @import commands in my theme.scss file to import directly from the Quark theme as explained in the 'Customisation' documentation, still no CSS is generated for the frontend.

Solution

  • To compile the SCSS on localhost, you need to do the following:

    Now you can follow the docs from Grav on Customising SCSS to make your own changes to SCSS. If you run $ npm run dev, Gulp will automatically compile your SCSS when it detects changes.

    Note: I have assumed package.json and gulpfile.js are copied from Quark.