如何在Angular 2 CLI中使用Susy

Question

概述

我很喜欢新的Angular 2 CLI，我成功地将我的旧前端结构迁移到了它上面。但是，我在使用Susy (http://susy.oddbird.net/)时遇到了一些问题。这是一个安装的gem，可以用作mixin。

我以为可能是我使用mixin的方式有问题，但我尝试了自定义mixin，它却可以正常工作。

所以我做了以下操作：

安装

安装GEM：

gem install susy

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

在.src/styles.scss中导入susy：

@import "~susy/sass/susy";

在.src/app/app.component.scss中引入：

@include container;

当我运行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

问题

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

- Bromox

---

请查看项目自述文件中的“第三方库安装”部分，看看是否能帮助您：https://github.com/angular/angular-cli#3rd-party-library-installation - Fredrik Lundin

谢谢，不幸的是这并没有帮助到我。有人成功添加了任何类似compass、susy、breakpoint的mixin吗？所有这些都对我无效。 - Bromox

好的，接下来我会尝试前往https://gitter.im/angular/home并在angular或angular-cli房间中提出问题。 - Fredrik Lundin

Answer 1

我按照你的示例进行操作，除了必须将导入放置在使用混合的 .scss 中之外，我已经让它正常工作了。在你的示例中，只需要在 app.scss 文件中使用导入语句，容器混合就会起作用。

我认为每个 scss 文件都是分别编译并针对每个组件进行限定的。因此，如果您想全局使用 susy 网格，请在主样式.scss 中导入它。如果您需要在应用程序组件中使用 susy 混合，则还需要在那里导入它。

不幸的是，我没有找到其他的解决办法。

- Chadwick Cole

Answer 2

检查你的Susy版本。 对于2.2.14，style.scss如下：

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

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

etc.

Susy 3+有所不同。请查看文档。

- user3193330