在 Angular 2 种子中集成 susy 支持答案

【问题标题】：integrating susy suport in anglar2 seed在 Angular 2 种子中集成 susy 支持
【发布时间】：2016-09-24 01:24:22
【问题描述】：

我已经在 angular2 种子 (https://github.com/mgechev/angular2-seed) 中集成了 sass 支持，并且还安装了 susy form npm(npm install susy --save-dev) 但是当我导入 susy form .scss 文件时，它会出现以下错误

[13:01:16] Starting 'build.html_scss'...
Error in plugin 'sass'
Message:
    src/client/css/main.scss
Error: File to import not found or unreadable: ~susy
       Parent style sheet: /home/jorin/WebStormWorkSpace/nylndaUI/src/client/css/main.scss
        on line 1 of src/client/css/main.scss
>> @import "~susy";
   ^

[13:01:16] Finished 'build.html_scss' after 218 ms

谁能指导我，我做错了什么？

【问题讨论】：

File to import not found or unreadable: susy的可能重复
您可能需要将 susy 安装为 rub gem。见stackoverflow.com/questions/13022956/…
配置 susy 以使用 config.rb 文件和 compass 工作正常，但我试图弄清楚如何将 susy 与基于 gulp 的构建系统一起使用，该构建系统使用 gulp-sass 加载 susy（因为我猜）并在我的项目中使用 susy gird 系统

标签： node.js angular gulp-sass susy

【解决方案1】：

在你的 sass 中，更正 susy 的路径。

可能是

@import "~susy/sass/susy";

Susy install Guide suggests to use bower 并使用相对路径。

bower install susy --save
@import "../bower_components/susy/sass/susy";

但是你没有理由不能使用 npm 安装的 susy 的路径：

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

如果你使用这个方法，这个文件是相对于你的 sass 文件的，所以它可能是这样的

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

【讨论】：