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 askubuntu.com. 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!