使用Angular 2 CLI进行SASS Mixins

Question

I am excited about the new Angular CLI tool and am currently adjusting my MEAN stack to use its folder structure. I setup my app to use SCSS instead of css as I love SASS.

However the main styles.scss that should work as global doesn't seem to load in the mixins for use in the other scss files. My styles.scss looks like this:

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";

My SCSS files for my components use @includes for things like breakpoint and susy however I get an error that says it can't find "Container", however susy is installed and imported in the styles.scss .

Error

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

确保通过运行以下命令设置全局默认样式：

ng set defaults.styleExt scss

Answer 2

Looks like Angular can't find Compass...

Check this thread out: https://github.com/angular/angular-cli/issues/2115 Try installing the compass-mixins via npm