I just started using Yeoman and so far it works great.
I wanted to replace compass with Bourbon/bourbon neat which is where I run into issues. I followed this tutorial but when I run "grunt serve" I get issues. It doesn't seem to be compiling my scss into a css file. I've checked the directory and there is no file there.
I tried getting the guys at thoughtbot to help out but no response yet.
Any help would be great.
Here is my gruntfile.js for reference.
I just spent the last hour trying to figure this out myself — hopefully the following fixes will work for you, too.
First off, I'm presuming the error you're getting is:
Warning: An error occurred while processing a template (Cannot read property 'app' of undefined).
The reason this is happening is because the Gruntfile for generator-webapp
has (I suppose somewhat recently) updated the project variable from yeoman
to config
— which means the yeoman.app
method is no longer valid. So:
1. Change all instances of <%= yeoman.app %>
to <%= config.app %>
This will resolve the CL errors. However, Thoughtbot's article also provides inaccurate instructions for including the Bourbon and Neat styles in your main.scss
, as the @import 'bourbon'
and @import 'neat'
calls won't be looking in the right directories. I'm sure there are more elegant ways of fixing this, but my solution was simply to provide the absolute references:
2a. Import Bourbon with @import '../bower_components/bourbon/dist/bourbon';
2b. Import Neat with @import '../bower_components/neat/app/assets/stylesheets/neat';
After saving these changes, make sure to stop grunt serve
if it's currently running. When you start it up again, you should be error-free and have a properly built main.css
file.
For reference, I've uploaded my complete Gruntfile after having made these changes: gist.github.com/colepeters/11155980
Hope this helps!
(By the way, I'll try and ping Thoughtbot with these issues so the article can be updated.)