Published on September 1, 2017
Author Aneta Camo
Notice: This post is more than a year old. Some of the content might be outdated.

How to track Sass files when using Jekyll

Don’t let Jekyll hide files from you anymore

Jekyll automatically handles wrapping and compiling Sass into CSS. That would be fine if it did not delete the source map and made it completely impossible to navigate back - Let’s see how to fix this!

In Praqma, we develop our websites using Jekyll with Sass files. We love it and it mostly work great for us. But Jekyll is sometimes a bit too clever for us.

When using Sass, all the code fragments are compiled and translated into one complex and unordered CSS file main.css that is interpreted by the browser.

To help navigate back to the original Sass source files - when using code inspector - a source map is being generated and updated together with every Sass-to-CSS update. It is represented by two files:

_site/css/main.css
_site/css/main.css.map

When running Jekyll - it automatically does the job of wrapping and compiling Sass into CSS itself. Unfortunately in a way that it becomes impossible to navigate to the original Sass source files. By running Jekyll, those two files that were just generated are being overwritten and deleted - by Jekyll.

So, in the developer console, instead of linking us to the right Sass file with the right fragments of the code, we are being directed to the complex and unordered CSS file, that is hard to display.

Therefore, we need to prevent Jekyll (temporarily) from deleting those two files. To do so, we need to exclude CSS and Sass from Jekyll’s activity.

When we do this, the source map remains and we can easily navigate to the source, fix the issues and get it back to its previous state.

Preparation

First, we need these two steps done in the code:

  • In the file css/main.scss, comment out the front matter - that means the pair of triple dashes indicating a jekyll file
    ---
    ---
    
  • In the file _config.yml add the following directive
    exclude: [css, _sass]
    

Watch out!

Second, we set up the service that keeps watching out for updates and keeps updating the whole chain of those two files. So anytime a change is made in any .sass file, it is linked into the main Sass file, and from there compiled into the CSS file. In your command line, execute a command like this:

sass -I _sass --watch css/main.scss:_site/css/main.css

Victory

And we are ready to go! Serve Jekyll in your line as usual

jekyll serve

That should give us a good working environment for updating the interface, keep us on track and easily navigate within the stylesheets. Notice however, that once our changes are done and tested, it is important to reverse the two steps in the code.

  • In the file css/main.scss uncomment/put back the front matter dashes
  • In the file _config.yml comment out the exclude code snippet

That’s it! Happy debugging!

Author: Aneta Camo

Read more about Aneta


Related Stories

Related Stories

×

CoDe-Conf 2019

CoDe-Conf 2019

The Continuous Delivery and DevOps Conference in Scandinavia

Start well with Kubernetes

Start well with Kubernetes

How to make the right technical choices on your cloud native journey

Video - Docker and Kubernetes in 40 minutes

Video - Docker and Kubernetes in 40 minutes

Watch this introduction to Docker and Kubernetes at the Trondheim Developer Conference (TDC)