Setting up SCSS compilation in a custom theme in Grav CMS

Question

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):

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.

Answer 1

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

• Download and install Node (including its package manager 'npm')
• $ cd user/themes/mytheme
• Load the (dev)dependencies listed in package.json: $ npm install
  This will load everything needed: Gulp, the SCSS compiler etc.
• Compile the SCSS files by running the 'build' script from package.json: $ npm run build
  This will run the 'build()' function inside gulpfile.js
• In folder /user/themes/mytheme/css-compiled, you should now find files with a new date.

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.