Posted on January 14 - 2017 in

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.

Start your project

If you feel I can help you with web design project I'd love to hear from you. Getting started is as easy as dropping me an email to start the discussion.

Start Project