How to use Susy in Angular 2 CLI

Overview

I love the new Angular 2 CLI, I was able to migrate my old front structure into it just fine. I however, have had trouble getting Susy (http://susy.oddbird.net/) to load. It is a gem that is installed and can be used as a mixin.

I thought it was maybe a problem with how I was using mixins but I tried a custom mixin and it worked just fine.

So I have done the following:

Installation

Installed the GEM:

gem install susy

NPM Install: npm install susy sass-loader --save-dev

Imported susy in .src/styles.scss

@import "~susy/sass/susy";

Included it in .src/app/app.component.scss

@include container;

when I run ng serve I get the following error:

ERROR in ./src/app/app.component.scss
Module build failed: 
    @include container;
         ^
      No mixin named container

Backtrace:
    stdin:2
      in /Users/allie.munro/Desktop/angular-cli/src/app/app.component.scss (line 2, column 11)
 @ ./src/app/app.component.ts 19:21-52
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

Question

Anyone see what I have done wrong or missed in installing Susy in Angular2 CLI? The documentation does say to amend my webpack file but this is not included in the folder structure that ng new appname provides. I am sure I can find it in the node_modules folder but this to me doesn't seem like best practice.

Solution

I followed your example and got it to work except the import has to be placed in the .scss that uses the mixins. In your example, you just need to use the import statement in your app.scss file and the container mixin will work.

I believe each scss file is compiled separately and scoped to each component. So if you wanted to use a susy grid globally import it in to the main styles.scss. If you need susy mixins in your app component you would need to import it there as well.

Unfortunately, I have not been successful any other way.