【问题标题】：How to use Susy in Angular 2 CLI如何在 Angular 2 CLI 中使用 Susy
【发布时间】：2017-06-24 17:20:41
【问题描述】：

概述

我喜欢新的 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

问题

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

【问题讨论】：

查看项目自述文件的“3rd-party-library-installation”部分，看看是否对您有帮助：github.com/angular/angular-cli#3rd-party-library-installation
谢谢，不幸的是这没有帮助。正如任何人在添加任何 mixin（如 compass、susy、断点）方面都取得了任何成功。所有这些都不适合我。
好的，接下来我会尝试去gitter.im/angular/home 并在 angular 或 angular-cli 房间中提问

标签： angular mean-stack susy angular2-cli

【解决方案1】：

我按照您的示例进行操作，但导入必须放在使用 mixins 的 .scss 中。在您的示例中，您只需在 app.scss 文件中使用 import 语句，容器 mixin 就可以工作。

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

很遗憾，我没有以其他方式成功。

【讨论】：

【解决方案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+ 似乎不同。检查the docs。

【讨论】：