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

我使用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吗？通过覆盖其默认的“主要”属性？

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