通过Bower in -libsass环境安装基金会-图标字体

Question

我使用的是基金会5-基础-libsass-模板。使用bower，我使用以下命令"bower install foundation-icons --save"添加了基础图标。此命令下载基金会图标包并将其保存到bower_components文件夹并修改我的bower.json文件。

{
  "name": "foundation-libsass-template",
  "dependencies": {
    "foundation": "zurb/bower-foundation",
    "foundation-icon-fonts": "zurb/foundation-icon-fonts"
  }
}

问题:当我将@import "foundation-icon-fonts";添加到app.scss文件时，Grunt返回一个错误，因为它找不到该文件：

警告: C:/Users/Chris/Websites/example.com/lp/new/scss/app.scss:3:文件导入未找到或不可读：“基础图标-字体”

问题1:我需要修改Grunt.js文件才能包含这个库吗？如果是的话，能否有人提供一个例子？谢谢。

Answer 1

嗯，我不使用这个包，但是@import CSS指令(和Sass版本)需要一个正确的导入路径。所以，既然您使用这个作为Bower模块，我想您需要这样的东西：

@import "bower_components/foundation-icons/path-to-styles.css";

但是，当我在我的系统上安装Bower包时，它看起来有多个目录，其中有字体和样式表：

.bower.json
foundation_icons_accessibility/
foundation_icons_general/
foundation_icons_general_enclosed/
foundation_icons_social/
.gitignore
MIT-LICENSE.txt
README.markdown

所以你可能需要指定目录？

@import "bower_components/path-to-foundation/foundation_icons_general/sass/general_foundicons.css";