3

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.

Bromox
  • 567
  • 2
  • 9
  • 29
  • Have a look at the "3rd-party-library-installation" section of the projects readme file and see if that helps you: https://github.com/angular/angular-cli#3rd-party-library-installation – Fredrik Lundin Feb 07 '17 at 12:51
  • Thank you, unfortunately this doesn't help. As anyone had any success in adding any mixins like compass, susy, breakpoint. All of these don;t work for me. – Bromox Feb 07 '17 at 19:38
  • Ok, what I would try next would be to go to https://gitter.im/angular/home and ask the question in either the angular or angular-cli room – Fredrik Lundin Feb 08 '17 at 05:44

2 Answers2

3

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.

Chadwick Cole
  • 46
  • 1
0

Check your Susy version. For 2.2.14, style.scss as follows:

@import "../node_modules/susy/sass/susy";

$susy: (
  columns: 12,
  container: 1200px,
  gutters: .25,
  debug: (image: show),
  math: fluid,
);

etc.

Susy 3+ is different seems. Check the docs.