如何将外部CSS文件导入我的Ember应用程序？

我正在尝试将FontAwesome和Google字体导入我的Ember应用程序，但它们不起作用。没有应用任何样式

我正在使用

ember cli sass

。我不能从CDN导入样式表吗？它不编译

.css

文件吗？我试着在CDN上寻找一个

.scss

文件，但是我找不到任何文件，而且我认为谷歌根本没有提供

.scss

文件

app.js

import 'fonts.scss'

@import '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
@import '//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300';

字体.scss

import 'fonts.scss'

@import '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
@import '//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300';

当我将

添加到模板时，不会应用任何字体样式。为什么不导入样式表？

有

如果您使用的是Ember，最好的方法是将CSS下载到中并添加到Ember-cli-build.js

---

或者，如果您想使用CDN，可以将CSS添加到Ember中的index.html中。

有两种主要方法。如果您不介意从internet获取，您可以将它们作为链接添加到

index.html中的
标记中

<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300" rel="stylesheet">



或者，您可以下载文件并将其包含在scss构建中。这使您可以更自由地自定义它们。您可能希望这样做，以最大限度地减少应用程序加载所需的API调用数量，正如您所听说的那样，这将加快应用程序的加载速度。但是要考虑的是，如果你正在加载的字体很流行（这两个字体），那么你的用户可能已经缓存了它们，使它们快速膨胀。


如果您想将这些文件下载到您的构建中，请点击这里。请记住，CSS是有效的SCS，所以如果您可以得到一个CSS文件，您可以将其重命名为.SCSS并将其包含在您的构建中。但您不能在SCS中从internet导入文件。你的SCS在你的应用得到服务之前就已经被解析并编译成CSS了。这些文件需要从项目文件夹中可用

象形异体字
对于4.7，您可以很容易地获取sass文件并将其包含在项目中。转到，单击“下载”按钮，下载文件。您需要两个文件夹，“scss”文件夹和“字体”文件夹。将这两个文件夹添加到项目中。打开
scss/_variables.scss
文件，并将
@fa font path
更改为字体目录的路径。将font-awesome.scss文件包括在SCS中。您也可以在以下网址找到说明：


如果你想开始喜欢，你可以编辑文件，只包含你想要的图标。有几种方法可以做到这一点，但我在这里不赘述。它是根据法律许可的，所以你应该可以合法地这样做

谷歌字体
打开浏览器并粘贴到url中。您将实际获得css文件。复制并粘贴到.scss文件中，并将其包含在生成中。使用谷歌字体，每种字体都有自己的许可证。开放式SAN包含在中，因此您可以这样做。
如果您是通过cdn下载它们，那么您可以在index.html文件中的css链接下链接应用程序的css链接。更好的方法是将依赖项放在本地供应商文件夹中，并在ember cli build File中引用它们（可能是的重复项）