Configuring grunt to compile sass, scss file is quite simple and straightforward. However, as I use the recent version 1.01, the task just hangs without doing any compiling. I’ve tried using grunt-contrib-sass and grunt-sass without any luck.
What’s the solution
I’ve spent hours searching for solution on Google but couldn’t find one. So, I came up with an idea: why do I have to rely on grunt? Using sass directly in the command line is very simple and the task completes quite quickly.
How do I set up?
The setup is very simple, you can write the following code in the command line to compile a sass/scss file to css file.
sass --watch source-file1:destination-file1 source-file2:destination-file2As you can see, you can pass multiple source:destination pairs
Now, as your source files change, sass will compile to the destination file automatically.
What if I want to compress the destination files?
If you want to minify the destination files, simply put –style compressed option into the command
sass --watch --style compressed source-file1:destination-file1 source-file2:destination-file2Now, your destination files will be minified.
I want to watch a folder with many files, what should I do?
Honestly, if you watch changes from a folder contains many files, sass may take a long time to compile to .css file. This is why I only watch changes on a few .scss files which import other partials. When I want to compile to .css file, I simply go to that file and add a space.
This strategy will save your computer from compiling sass all the time. On old computer, you may hear the fans’ noise constantly.