Search code examples
compass-sassyeoman

Importing Compass styles with Sass using Yeoman

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?

Solution

  • 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