Angular 2 seed - how to enable compass support in sass file

Question

I use this seed project for my Angular 2 app.

My goal is to use compass mixins and functions in all sass files.

In this moment when i try to use @import 'compass' it simply can not make import.

I had instaled newest SASS and COMPASS gem.

I think to do this i need some config.rb but i have no idea how to properly place it in this files structure.

Or maybe i need gulp-compass and implement some gulp's task to enable compass, when whole app build-up?

But when exactly start this task and how should code for this task look like ?

Answer 1

If you want to use compass mixin only, it is better to use compass-mixins. It contains most compass mixins as 'original Compass' provided.

Here are the steps:

1. npm install --save-dev compass-mixins

2. Edit SASS options in seed.config.ts

   SASS_OPTIONS: SassOptions = { includePaths: ['./node_modules/compass-mixins/lib/'] };

Then it should work in angular2-seed-sass. Because I did similar thing in angular2-seed and it works.

After play with gulp-compass, gulp-ruby-sass for 2 days, I believe that the above solution should be the simplest.