Search code examples
csssassjekyll

Updating CSS with SCSS using Jekyll


Decided to try Louis Rassaby Theme. I am still new with sass/scss using Jekyll. I am unable to update main.css with _filename.scss files. I assumed that Jekyll would do it automatically every time I do jekyll serve.

I forked theme from https://github.com/lrassaby/lrassaby.github.io.


Solution

  • It looks like the theme you forked uses Gulp npm packages to manage its asset pipeline, and included in that is a step that processes Sass files. From the documentation, it seems like you can run npx bundle exec gulp to serve the site locally, and that should watch the Sass files for changes—just make sure you're including new imports in src/styles/ and including import statements for them in your src/styles/main.scss file, which is getting output as assets/css/main.css.

    This will not work with Jekyll's standard build/serve flow, which uses a Ruby gem to handle the Sass processing and requires you to specify a folder for storing Sass imports in your Jekyll config and then include those imports in a file that it will process (see documentation). To change it so that it's using Jekyll's build process, you'd need to move all of your imports from the current Sass folder to one you've defined in your Jekyll config file (or simply point to this existing folder in your config, though you'd also have to make sure it's included in Jekyll processing), then move the main.scss file into your assets/css/ folder. That might break your existing asset pipeline, though, unless you remove the Sass processing step from it.