References to font (font-awesome) resources are not updated in yeoman/angular grunt build

我只是一个虾纸丫 提交于 2019-12-03 04:56:29

Finally, I figured it out :)

I pinned down cssmin to be the bad guy in this game: It was responsible for writing the .tmp paths into the final css file. To solve this, I added the noRebase: true, option to the cssmin task in Gruntfile.js .

To get along with the font references, I also used the copy task to copy the fonts into my dist folder and had to use $icon-font-path: "../fonts/" to have it finally in the right format.

Maybe this will help someone stuck in a similar situation :-)

Here's my solution. I don't mess with the font-awesome scss at all. So all I need is a way to treat font-awesome similar to bootstrap, add css or js and then done with it.

If you open bower.json for under your yoeman build folder, you can change the overrides section to the following,

"overrides": {
"bootstrap": {
  "main": [
    "less/bootstrap.less",
    "dist/css/bootstrap.css",
    "dist/js/bootstrap.js"
  ]
},
"font-awesome": {
  "main": [
    "less/font-awesome.less",
    "css/font-awesome.css"
  ]
}

}

once you do that, your font-awesome.css will show up in index.html build section like

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />

Of course, this assume that you won't mess up with scss, therefore you can delete the build section inside main.scss, used to be

// bower:scss
@import "bower_components/font-awesome/scss/font-awesome.scss";
// endbower

After you done that, your grunt serve should work right away. In order to get grunt build work, you just need to keep the relationship between fonts folder and css folder of fontawesome, which means copy the fonts to /fonts, the grunt file will look like,

    }, {
      expand: true,
      cwd: 'bower_components/bootstrap/dist',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>'
    }, {
      expand: true,
      cwd: 'bower_components/font-awesome/',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>'
    }]

In short, I treated fontawesome same as bootstrap without any customization.

I have not run into this problem probably because I use relative path to my font files and the same path works without modifications when I build a dist. I just have one copy task that does:

copy: {
      fonts: {
        src: 'fonts/*',
        dest: 'dist/',
      },
...
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!