Issues with compiling partials with Koala

I started using Koala on a local version of this very website earlier this week and quickly ran into a compiling issue.

Koala would only compile if I saved the ‘main’ SASS file. i.e – it was only watching one SASS file.

After a few failed Goole searches I started getting a bit frustrated.

I have the project set up so that the main SASS file contains a bunch of imports and no other SASS code, then I have partials full of SASS. Annoyingly every time I wanted to compile, I was having to save my partial, and then save the main sass file as well otherwise Koala wouldn’t run a compile…less than ideal.

The solution ended up being related to syntax.

Originally I had my main SASS file importing partials like so:

@import variables
@import core
@import blocks

etc etc.

The partials contained all the juice and were named like so:

_variables.sass
_core.sass
_blocks.sass

(Note: The underscores mean that your compiler will recognise its just a partial and won’t generate a css file for it!)

The issue ended up being how I was importing into the main SASS file. I changed the syntax to the following and it all started working correctly:

@import ‘variables’
@import ‘core’
@import ‘blocks’

Notice the difference? I put the file names in single quotes.

Now no matter what file I save in the project, Koala runs a compile for me! yippee!

Note that I have ‘auto compile’ on in Koala, which you can access by clicking the main SASS file you are working with.

Hope this helps some of you out.