SASS Mixins mit Angular 2 CLI

Question

Ich bin gespannt auf das neue Angular CLI Tool und bin gerade dabei, meinen MEAN Stack anzupassen, um seine Ordnerstruktur zu nutzen. Ich habe meine App so eingerichtet, dass sie SCSS statt CSS verwendet, weil ich SASS liebe.

Allerdings scheint die Hauptstile.scss, die als global funktionieren sollte, nicht in den Mixins für die Verwendung in den anderen scss-Dateien geladen werden. Mein styles.scss sieht wie folgt aus:

STYLES.SCSS

//Compass Import 
    @import "compass"; 
    @import "compass/reset"; 
    @import "compass/css3/box-shadow"; 
    @import "compass/css3/text-shadow"; 
    @import "compass/css3/filter"; 
    @import "compass/css3/flexbox"; 
    @import "compass/css3/transition"; 

    //External Libraries 

    @import "susy"; 
    @import "breakpoint"; 


    //Core Partials 
    @import "scss/variables"; 
    @import "scss/base"; 
    @import "scss/mixins"; 
    @import "scss/layout"; 

    //Modules 

    @import "modules/myApp"; 

Meine SCSS Dateien für meine Komponenten @includes für Dinge wie Breakpoint und susy verwenden aber ich erhalte eine Fehlermeldung, die besagt, es nicht finden können, "Container", jedoch wird susy installiert und in die styles.scss importiert.

Fehler

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

Backtrace: 
     stdin:3 
     in C:\Users\Allie\Desktop\HWADatabase\src\app\app.component.scss (line 3, column 11) 
@ ./src/app/app.component.ts 26:21-52 
@ ./src/app/app.module.ts 
@ ./src/main.ts 
@ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts 

ERROR in ./~/css-loader?{"sourceMap":false}!./~/postcss-loader!./~/sass-loader!./src/styles.scss 
Module build failed: 
@import "compass"; 
^ 
     File to import not found or unreadable: compass. 
Parent style sheet: stdin 
     in C:\Users\Allie\Desktop\HWADatabase\src\styles.scss (line 2, column 1) 
@ ./src/styles.scss 4:14-181 
@ multi ./src/styles.scss 

Answer 1

Stellen Sie sicher, dass globale Standardstil festlegen, indem ausgeführt wird:

ng set defaults.styleExt scss