加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 在yeoman / angular grunt构建中不更新对font(font

发布时间:2020-12-17 18:00:48 所属栏目:安全 来源:网络整理
导读:我知道关于这个的SO线程(我已将它们链接到下面),但不幸的是我无法解决这个问题,所以请允许我这个问题:-) 我用Yeoman引导了一个AngularJS项目,因此依赖于使用bower.js和SCSS的grunt.js构建. 我想从bootstrap-sass-official使用font-awesome和glyphicons-halfl
我知道关于这个的SO线程(我已将它们链接到下面),但不幸的是我无法解决这个问题,所以请允许我这个问题:-)

我用Yeoman引导了一个AngularJS项目,因此依赖于使用bower.js和SCSS的grunt.js构建.
我想从bootstrap-sass-official使用font-awesome和glyphicons-halflings-regular.
当运行“grunt serve”时一切都很好,但是当我想创建一个用于分发的文件集时,对字体文件的引用不会按照它们应该更新.

main.scss包含

$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/";
@import 'bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';

$fa-font-path: "../bower_components/font-awesome/fonts/";
@import "font-awesome/scss/font-awesome";

但是dist / styles / 123456.main.css中的结果是像

@font-face{font-family:FontAwesome;src:url(/Users/markus/src/angular_app/.tmp/bower_components/font-awesome/fonts/fontawesome-webfont.eot?v=4.1.0);

所以,对我来说,它看起来像路径更新(到tmp路径),但没有正确的值为“dist”.
我试图摆弄gruntfile中的copy和rev任务,但还没找到合适的触发器,但是:(

我用过的线程和其他来源为此找到了解决方案:

> Fontawesome is not working when project is built with grunt
> Assets missing in Angular application built using grunt
> Font awesome URL not coded in main.css for grunt dist
> http://likesalmon.net/use-font-awesome-on-yeoman-angularjs-projects/
> https://github.com/yeoman/generator-angular/issues/350

有什么提示我怎么能这个?

解决方法

最后,我想通了:)

我把cssmin固定为这个游戏中的坏人:它负责将.tmp路径写入最终的css文件.为了解决这个问题,我在gruntfile.js中为cssmin任务添加了noRebase:true选项.

为了与字体引用相处,我还使用了复制任务将字体复制到我的dist文件夹中,并且必须使用$icon-font-path:“../ fonts /”以最终格式正确.

也许这会帮助陷入类似情况的人:-)

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读