Yeoman Angular Bootstrap SASS compilation error

I’ve recently been doing some front-end-focused web development on a jMVC-style project which has lead me to have a look at some of the more recent front-end technologies that are abounding at the minute. After some experimentation and reading I decided that AngularJS looked to be a very cool way to go. So after a little reading on the Angular site, I hunted out a ‘Getting Started’ tutorial which would include some decent workflow (I went with Kickstart Your AngularJS Development with Yeoman, Grunt and Bower), which opened me up to Yeoman and friends.

All was looking good – I’d even managed to sidestep a few issues (these things move incredibly fast). Then I came to actually getting something in my browser…

grunt serve

But I was met with the following:

error app/styles/main.scss (Line 121 of app/bower_components/sass-bootstrap/lib/_mixins.scss: Invalid CSS after "...-shadow($shadow": expected ")", was "...) {")

Googling this error (at least when I did it) really didn’t help, though happily the solution turned out to be fairly reasonable – it would appear my sass was a bit out of date. I tried doing a

sudo gem update

but that didn’t work, so it occurred to me I might have installed my distro packages for sass and compass a while back (I don’t do that much front-end dev :)). I found the procedure to remedy the situation in this answer on In a nutshell:

sass --version # Sass 3.1.19 (Brainy Betty)
which sass # /usr/bin/sass
apt-get remove ruby-sass ruby-compass
apt-get install ruby-full 
gem install sass 
gem install compass
sass --version # Sass 3.2.7 (Media Mark)
which sass # /usr/local/bin/sass

Now I can

grunt serve

with no errors. Nice!

One thought on “Yeoman Angular Bootstrap SASS compilation error

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>