如何在Angular 4 cli项目中导入离子（sass）

Question

如何在运行ng serve（npm start）的Angular 4 cli项目中添加ionicons（Sass）？

我按照以下步骤操作：

1. 导入ionicons lib

   @import "~ionicons/dist/scss/ionicons";

2. 在variables.scss中：

   $ionicons-font-path: "~ionicons/dist/fonts";

在控制台中没有出错，但是没有加载字体并且没有出现图标。

使用

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

工作正常。

Answer 1

我能够通过将ionicons版本更改为package.json中的版本2.0.1来解决此问题。它不适用于Ionicons的最新版本。

所以，在package.json

中

"ionicons": "2.0.1"

这是我在主SCSS文件中导入的方式。

$ionicons-font-path: "../../../node_modules/ionicons/fonts";

@import "~ionicons/scss/ionicons";

这是HTML代码。

<i class="ion-location"></i>