Gruntjs 在Yeoman'；s角项目

我使用Yeoman的生成器创建了一个Angular项目，现在我正在尝试将字体添加到项目中。我安装它使用鲍尔使用

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

然后我运行

grunt build

，但是有东西（grunt？）将我的文件编辑回了原始文件。

index.html

再次获得了

，而我的

main.scss

仅在引导导入时保留

好的，我们快到了

因此，我查看了Bootstrap的

bower.json

，并将其与字体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 Aewome的bower配置，并在其中添加了以下代码

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

---

问题：这是将Font Awesome用作SCSS导入并避免在构建项目时更改文件的正确方法吗？通过覆盖其默认的

“main”

属性？

根据您的问题判断，我认为您可能是web前端构建过程的新手。不幸的是，它有时会令人头痛

首先，请注意，SCSS！=CSS和浏览器不知道如何使用SCS。在HTML

标记中包含

将不起作用。在开发过程中，我们可以享受SCS的各种好处（例如变量、导入等），但要在浏览器中使用这些样式，我们必须将SCS转换为CSS（浏览器可以识别）

为了让开发人员的生活更轻松，种子项目（例如您正在使用的项目）通常包括某种自动构建过程，其中包括将SCS转换为CSS。构建过程通常通过任务运行程序（如Grunt或Gulp）执行。这些种子项目/模板通常还包括一项任务，用于将项目的依赖项（如bower.json文件中声明的）自动注入

index.html

。名为

wiredep

的工具用于读取

bower.json

文件以确定这些依赖关系，特别是，它将查找“main”属性以确定特定包需要哪些文件。然后，它将注入相应的

和

标记

为了进一步解释这一点，当您执行

bower-install font-aweseome--save

时，会发生一些事情：

软件包将被下载并添加到您的项目中（通常添加到

bower\u components/

）

一个条目被添加到

bower.json

文件中，将包添加到项目的依赖项中

每个包都包含自己的

bower.json

文件，该文件描述了它的各种属性，其中最重要的属性（在名称之后）是

main

。您可以看到

font-awesome

bower.json

文件。如您所见，它的

main

属性引用了多个文件。这些文件是

wiredep

用于确定要将哪些

和

标记插入

index.html

的文件

通过在项目的

bower.json

中指定覆盖，如下所示：

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

您正在向

wiredep

指定

/scss/font awesome.scss

和

/font/*

是项目所需的文件，并忽略

font awesome

bower.json文件中列出的文件

关于SCS：看看Sass，特别是关于进口的部分。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文件中

---

谢谢你的回答，布莱克！实际上，我使用SCSS已经有一段时间了，但这是我第一个使用Bower和Grunt等工具的项目。也许我的问题还不够清楚，但问题是：我在项目的

bower.json

中覆盖属性是否正确？因为我不想单独导入他们的CSS文件，所以我想（现在我正在这么做）生成一个CSS文件，其中包括Bootstrap、fontsawesome和项目需要的任何其他内容。我问这个是因为看起来不对。初学者的恐惧可能：-）

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