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

【问题标题】：Correct way to use Font Awesome SCSS in a Yeoman's Angular project在 Yeoman 的 Angular 项目中使用 Font Awesome SCSS 的正确方法
【发布时间】：2023-03-11 22:35:02
【问题描述】：

我使用 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，但有些东西（咕噜声？）将我的文件编辑回原始文件。 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" 属性？

【问题讨论】：

标签： gruntjs bower font-awesome

【解决方案1】：

从您的问题来看，我认为您可能是网络前端构建过程的新手。不幸的是，它有时会让人头疼。

首先，请注意 SCSS != CSS 和浏览器不知道如何使用 SCSS。在您的 HTML <head> 标记中包含 <link rel="stylesheet" href="main.scss"> 将不起作用。我们可以在开发过程中享受 SCSS 的各种好处（例如变量、导入等），但要在浏览器中使用这些样式，我们必须将 SCSStranspile 转换为 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-awesomebower.json文件here。如您所见，它的main 属性引用了几个文件。这些是wiredep 用来确定将哪些<script/> 和<link> 标记注入index.html 的文件。

通过在您的项目的 bower.json 中指定覆盖，如下所示：

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

您向wiredep 指定./scss/font-awesome.scss 和./fonts/* 是您的项目所需的文件，并忽略font-awesome bower.json 文件中列出的文件。

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

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

在我自己的自定义 main.scss 文件中指定导入。
对我想要的变量进行任何自定义。
将main.scss 转换成CSS。
在我的 index.html 文件中的转译 CSS 文件中包含一个 <link> 标记。

【讨论】：

感谢布莱克的回答！实际上我使用 SCSS 有一段时间了，但这是我第一个使用 Bower 和 Grunt 等工具的项目。也许我的问题不够清楚，但问题是：在我的项目bower.json 中覆盖 FontAwesome 属性是否正确？因为我不想单独导入他们的 CSS 文件，所以我想（我现在正在这样做）生成一个包含 Bootstrap、FontAwesome 和项目需要的任何其他内容的 CSS 文件。我问那个是因为它看起来不对。初学者的恐惧也许:-)