如何在 Angular 2 CLI 中使用 Susy
How to use Susy in Angular 2 CLI
概述
我喜欢新的 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 文件夹中找到它,但这对我来说似乎不是最佳做法。
我按照你的例子做了,除了导入必须放在使用混合的 .scss 中。在你的例子中,你只需要在你的 app.scss 文件中使用 import 语句,容器 mixin 就会工作。
我相信每个 scss 文件都是单独编译的,并且适用于每个组件。因此,如果您想全局使用 susy 网格,请将其导入主 styles.scss。如果您的应用程序组件中需要 susy mixins,您也需要将其导入那里。
不幸的是,我没有通过任何其他方式获得成功。
检查您的 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.
概述
我喜欢新的 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 文件夹中找到它,但这对我来说似乎不是最佳做法。
我按照你的例子做了,除了导入必须放在使用混合的 .scss 中。在你的例子中,你只需要在你的 app.scss 文件中使用 import 语句,容器 mixin 就会工作。
我相信每个 scss 文件都是单独编译的,并且适用于每个组件。因此,如果您想全局使用 susy 网格,请将其导入主 styles.scss。如果您的应用程序组件中需要 susy mixins,您也需要将其导入那里。
不幸的是,我没有通过任何其他方式获得成功。
检查您的 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.