Importing Compass styles with Sass using Yeoman

Question

I created a project using yo webapp (with the generator-webapp installed obviously). Everything is fine, but I'm still missing something. I'm sure it's such an easy answer that I'll never come back to SO because I'll be too embarrassed.

I want to use Compass, which comes out of the box with Yeoman, but I don't know how. I mean, obviously @import "compass...etc" inside any Sass files won't work since inside app/bower_components (the default path for Sass @imports specified inside Gruntfile.js) there's no compass directory.

What should I do now in order to import Compass stylesheets?

Answer 1

You can use compass just as you would usually do. If you set up a vanilla compass project with compass create, there is compass folder either. If you want to use any of the helpers compass ships with, you can import them just as described in the documentation, e.g.

@import "compass/css3";

.mybox {
    @include box-shadow(red 2px 2px 10px);
}

main.scss

Answer 2

You would have to install grunt task for compass with npm install grunt-contrib-compass and adjust your Gruntfile.js to add a task for compass compilation.

It may appear not that easy since it has some tricky parts like to compile your sass to .temp/main.css to use for testing/livereload, and then minify it into your dist when doing final build.

The most easy way might be to just try another generator that has compass in a separate directory. For example angular generator has compass and even bootstrap for compass. It's pretty cool.