angular - 如何在 Angular 2 CLI 中使用 Susy

Question

概览

我喜欢新的 Angular 2 CLI，我能够很好地将旧的前端结构迁移到其中。但是，我无法加载 Susy ( http://susy.oddbird.net/)。它是一个已安装的 gem，可以用作 mixin。

我认为这可能是我使用 mixin 的方式有问题，但我尝试了自定义 mixin，它工作得很好。

所以我做了以下事情:

安装

安装 GEM:

gem 安装 susy

NPM 安装:npm install susy sass-loader --save-dev

在.src/styles.scss中导入susy

@import "~susy/sass/susy";

包含在.src/app/app.component.scss

@include 容器;

当我运行 ng serve 时，出现以下错误:

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

问题

有人看到我在 Angular2 CLI 中安装 Susy 时做错了什么或遗漏了什么吗？文档确实说要修改我的 webpack 文件，但这不包含在 ng new appname 提供的文件夹结构中。我确定我可以在 node_modules 文件夹中找到它，但对我来说这似乎不是最佳做法。

Answer 1

我按照你的例子让它工作，除了导入必须放在使用混合的 .scss 中。在您的示例中，您只需要在 app.scss 文件中使用 import 语句，容器 mixin 就会起作用。

我相信每个 scss 文件都是单独编译的，并且适用于每个组件。因此，如果你想在全局范围内使用一个 susy 网格，请将其导入到主要的 styles.scss 中。如果您的应用程序组件中需要 susy mixins，您也需要将其导入那里。

不幸的是，我没有通过任何其他方式取得成功。