Search code examples
javascriptcssgruntjsyeomanbourbon

Using bourbon/bourbon neat with Yeoman without errors


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.

https://dl.dropboxusercontent.com/u/9830212/Gruntfile.js


Solution

  • 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.)