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

How can I import external CSS files into my Ember app?

我正在尝试将 Font Awesome 和 Google 字体导入我的 Ember 应用程序,但它们无法正常工作。 None 的样式正在应用。

我正在使用 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> 添加到我的模板时,应用了 none 的 Font Awesome 样式。为什么不导入样式表?

no support in SASS for importing a CSS file

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

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

有两种主要方法可以做到这一点。如果您不介意从互联网上获取它,您可以将它们作为链接添加到 index.html 中的 <head> 标签中。

<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 中从互联网导入文件。你的 scss 在你的应用程序被提供之前就被解析并编译成 CSS 。这些文件需要在您的项目文件夹中可用。

字体很棒

对于 FontAwesome 4.7,您可以获得 sass 文件并将其包含在您的项目中非常容易。转到 http://fontawesome.io/ , click the "Download" button, download the files. You need two folders, the "scss" folder and the "fonts" folder. Add those two folders to your project. Open the scss/_variables.scss file and change the @fa-font-path to be the path to the font directory. Include the font-awesome.scss file in your scss. You can also find the instructions at http://fontawesome.io/get-started/

如果你想开始变得有趣,你可以编辑文件以只包含你想要的图标。有几种方法可以做到这一点,但我不会在这里讨论。它根据 MIT license 获得许可,因此您应该能够合法地执行此操作。

Google 字体

打开浏览器并粘贴http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300 into the url. You will actually get the css file. Copy and paste into a .scss file and include it in your build. With Google Fonts each font has its own license. Open Sans is covered by the Apache 2.0 license,这样就可以了。