Question

我使用Yeoman的生成器创建了一个Angular项目，现在我正在尝试将Font Awesome添加到项目中。我使用Bower使用

安装它

bower install fontawesome --save

然后它自动添加到我的app/index.html以下代码：

<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css" />
<!-- endbower -->
<!-- endbuild -->

但我不想将它用作CSS，而是用作 SCSS导入（以便能够更改字体文件的URL）。因此，我从HTML页面中删除了上述代码，并将正确的代码添加到app/styles/main.scss：

中

$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
$fa-font-path: "../bower_components/fontawesome/fonts/"; // <==== here

// bower:scss
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
@import "fontawesome/scss/font-awesome.scss"; // <==== and here
// endbower

然后我运行grunt build，但是某些东西（Grunt？）将我的文件编辑回原始文件。 index.html再次获得<link>，我的main.scss仅保留了Bootstrap导入。

好的，我们快到了。

所以我查看了Bootstrap的bower.json，并与Font Awesome的bower.json进行了比较，我看到了以下不同之处：

// Bootstrap
"main": [
  "assets/stylesheets/_bootstrap.scss", // it's SCSS
  ...
],

// Font Awesome
"main": [
  "./css/font-awesome.css", // it's CSS
  ...
],

然后我找到了一种方法来正确（不确定）使用我的应用bower.json覆盖Font Awesome的凉亭配置，并将以下代码添加到其中

"overrides": {
  "fontawesome": {
    "main": [
      "./scss/font-awesome.scss", // now it's SCSS
      "./fonts/*"
    ]
  }
}

问题：这是使用Font Awesome作为SCSS导入的正确方法吗？在构建项目时避免Grunt更改我的文件？通过覆盖其默认的"main"属性？

Answer 1

根据您的问题判断，我认为您可能不熟悉Web前端构建过程。不幸的是，它有时会让人头疼。

首先，请注意SCSS！= CSS和浏览器不知道如何使用SCSS。在您的HTML <link rel="stylesheet" href="main.scss">标记中加入<head>将无效。我们可以在开发过程中享受SCSS的各种特权（例如变量，导入等），但要在浏览器中使用这些样式，我们必须将 SCSS转换为CSS（浏览器可识别）。

为了简化开发人员的生活，种子项目（例如您正在使用的项目）通常包含某种自动构建过程，其中包括将SCSS转换为CSS。构建过程通常通过任务运行程序执行，例如Grunt或Gulp。这些种子项目/模板通常还包括一个任务，用于将项目的依赖项（在bower.json文件中声明）自动注入index.html。名为wiredep的工具用于读取bower.json文件以确定这些依赖关系，特别是，它将查找“main”属性以确定特定包所需的文件。然后，它会注入相应的<script/>和<link>标记。

为了进一步解释这一点，当你执行bower -install font-aweseome --save时会发生一些事情：

该软件包已下载并添加到您的项目中（通常是bower_components/）。
您的bower.json文件中添加了一个条目，将该软件包添加到项目的依赖项中。

每个包都包含自己的bower.json文件，该文件描述了其各种属性，其中最重要的（名称后）为main。您可以看到font-awesome bower.json文件here。如您所见，它的main属性引用了几个文件。这些是wiredep用于确定要注入<script/>的{{1}}和<link>个标记的文件。

通过在项目的 index.html中指定覆盖，如下所示：

bower.json

您指定"overrides": { "fontawesome": { "main": [ "./scss/font-awesome.scss", // now it's SCSS "./fonts/*" ] } } wiredep和./scss/font-awesome.scss是项目所需的文件，并忽略./fonts/* bower.json文件中列出的文件。< / p>

关于SCSS：看一下Sass guide，特别是有关导入的部分。 Sass font-awesome允许您将样式分割为几个较小的SCSS文件（部分），这些文件在转换后组合并包含在单个（可选缩小的）CSS文件中。这包括您导入@import的任何第三方SCSS 文件。例如，如果您将main.scss导入font-awesome.scss文件，然后将其转换为CSS，则生成的CSS文件将包含main.scss中包含的所有样式。

要包含和自定义第三方SCSS文件，我所做的是：

在我自己的自定义font-awesome.scss文件中指定导入。
对我想要的变量进行任何自定义。
将main.scss透明化为CSS。
在main.scss文件中的已编译CSS文件中加入<link>标记。

在Yeoman的Angular项目中使用Font Awesome SCSS的正确方法

1 个答案: