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

时间：2017-05-03 16:42:33

标签： css ember.js sass font-awesome google-font-api

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

我正在使用ember-cli-sass。我不能能够从CDN导入样式表吗？它不能编译.css个文件吗？我尝试在CDN上寻找Font Awesome的.scss文件，但我找不到任何文件，而且我认为Google根本不会提供.scss个文件。

app.js 

import 'fonts.scss'

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';

当我将<i class="fa fa-user"></i>添加到我的模板时，没有应用任何Font Awesome样式。为什么没有导入样式表？

2 个答案:

答案 0 :(得分：1)

有两种主要方法可以做到这一点。如果您不介意从互联网上获取，可以将其添加为<head>中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是有效的SCSS，因此如果您可以获得CSS文件，您可以随时重命名.scss并将其包含在您的构建中。但是您无法在scss中从Internet导入文件。在你的应用程序获得服务之前，你的scss会被解析并编译成CSS。这些文件需要从项目文件夹中获取。

Font Awesome

对于FontAwesome 4.7，您可以轻松获取sass文件并将其包含在项目中。转到http://fontawesome.io/，单击“下载”按钮，下载文件。您需要两个文件夹，“scss”文件夹和“fonts”文件夹。将这两个文件夹添加到项目中。打开scss/_variables.scss文件并将@fa-font-path更改为字体目录的路径。在scss中包含font-awesome.scss文件。您也可以在http://fontawesome.io/get-started/

找到相关说明

enter image description here

如果您想开始想象，那么您可以编辑文件以仅包含您想要的图标。有几种方法可以做到这一点，但我不会在这里讨论。它是在MIT license下获得许可的，因此您应该能够合法地执行此操作。

Google字体

打开浏览器并将http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300粘贴到网址中。你将实际获得css文件。复制并粘贴到.scss文件中并将其包含在您的构建中。使用Google字体，每种字体都有自己的许可证。 Open Sans由Apache 2.0 license覆盖，因此您可以执行此操作。

答案 1 :(得分：0)

有no support in SASS for importing a CSS file

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

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

相关问题
最新问题