Using bourbon/bourbon neat with Yeoman without errors

Question

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

Answer 1

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

Answer 2

I was working on this same problem today. I would like to thank Cole for the great answer that fixed my first problem <%= config.app %>. This is a continuation of the subject at hand.

I spent some time playing around with the Gruntfile.js and found a way to simplify the imports in the stylesheet. Look around line 38 or so.

options: {
    loadPath: [
    '/Users/username/project/bower_components/bourbon/dist',
    '/Users/username/project/bower_components/neat/app/assets/stylesheets'
     ]
}

If you make them local then it works. This allows you to use @import 'bourbon'; and @import "neat';

It's not an elegant solution, but neither am I. I just hope it helps. I will continue to look for a prettier solution.

The toughtbot tutorial is great, but it's kind of obvious that all tutorials are not current.

Answer 3

everything is changing too fast; the problem here resigns on loadPaths. you must check which is the right path of your files and adapt it according.

@TrueRed72 answer is clear about setting the correct load path, so he can import the file from main.scss without long paths specifications. in my case, i'm still using <%= yeoman.app %>, but my bower_components folder is not on project_path/app/ but on the project_path/ root. so my loadPath ended being:

loadPath: [
    '<%= yeoman.app %>/../bower_components/bourbon/dist/',
    '<%= yeoman.app %>/../bower_components/neat/app/assets/stylesheets/'
]

so... the trick is: take a look at the real files path inside bower_components folder and update your loadPath inside Gruntfile.js accordingly

Answer 4

Looks like the repos have changed. This worked out for me:

in app/styles/main.css

@import "../../bower_components/bourbon/app/assets/stylesheets/bourbon";
@import "../../bower_components/neat/app/assets/stylesheets/neat";

Answer 5

Here's as a solution which doesn't require any re-routing of the bourbon/neat .scss paths in Gruntfile.js or main.scss, just a tinker with the watch task for the .scss files. This all came after getting errors similar to the other posts here.

I wanted to break the demo styling out into separate files to augment ./app/sass/main.scss and make the whole thing more modular and user-personalised.

Firstly set up the following: ./app/sass/user/user-main.scss. Secondly set up the following: ./app/sass/user/02/user-secondary.scss

Then in Gruntfile.js edit grunt.initConfig > watch > sass > files to read as this:

files: ['<%= config.app %>/sass/**/**/**/{,*/}*.{scss,sass}']

I edited the files task only, nothing else, and that is on or around line 51. Making this edit allows for grunt to auto upload when styling is edited/saved in whichever directory you work in. You'll see that i've added wildcard selectors for 3 directories deep. I generally don't go any deeper than that if poss but that's down to the project/individual.

Then in the stylesheets i did the following:

• in main.scss left the bourbon/neat @import rules as they are, no changes
• in main.scss - after the bourbon/neat imports - added: @import 'user/user-main';
• removed all of the styling declarations from main.scss and put them inside user/user-main.scss
• at the bottom of user/user-main.scss added: @import '02/user-secondary';

This sass should be intuitive and the structure is just for a use-case.

With this i have cleaned up main.scss of all the styling declarations, and this file now serves only as the root of all styling imports. From there the project is broken out into user-specific directories/stylesheets, which is what i wanted.

Then just run grunt build and grunt serve and edits can be made to the /user/ stylesheets and the whole thing auto-loads without errors.

As a final tweak, i wanted to add some padding to the outer-container mixin which is applied to the body to stop everything going flush to the viewport edges, as posted here. So in user/02/user-secondary.scss i added @include pad(0 10px); to body. It's a bit hacky as it actually reduces the width of the container, but it does apply some space at the viewport sides.

Hope this helps!