我知道有关此问题的SO线程(我在下面链接了它们),但不幸的是我无法用它们解决这个问题,所以请允许我这个问题:-)
我使用 Yeoman 启动了一个 AngularJS 项目,因此依赖于使用 Bower.js 和 SCSS 的 grunt.js 构建。
我想使用 bootstrap-sass-official 中的 font-awesome 和 glyphicons-halflings-regular。
当运行“gruntserve”时一切都很好,但是当我想创建一个用于分发的文件集时,对字体文件的引用没有按应有的方式更新。
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 中的复制和修改任务,但还没有找到正确的触发器:(
我用来寻找解决方案的线程和其他来源:
- 当使用 grunt 构建项目时,Fontawesome 无法工作 https://stackoverflow.com/questions/21310382/fontawesome-is-not-working-when-project-is-built-with-grunt/21310885#21310885
- 使用 grunt 构建的 Angular 应用程序中缺少资产 https://stackoverflow.com/questions/21932451/assets-missing-in-angular-application-built-using-grunt
- 字体很棒的 URL 未在 main.css 中为 grunt dist 编码 https://stackoverflow.com/questions/22637984/font-awesome-url-not-coded-in-main-css-for-grunt-dist
- http://likesalmon.net/use-font-awesome-on-yeoman-angularjs-projects/ http://likesalmon.net/use-font-awesome-on-yeoman-angularjs-projects/
- https://github.com/yeoman/generator-angular/issues/350 https://github.com/yeoman/generator-angular/issues/350
有什么提示我可以解决这个问题吗?
终于,我明白了:)
我确定 cssmin 是这个游戏中的坏人:它负责将 .tmp 路径写入最终的 css 文件。为了解决这个问题,我添加了noRebase: true,
Gruntfile.js 中 cssmin 任务的选项。
为了处理字体引用,我还使用复制任务将字体复制到我的 dist 文件夹中,并且必须使用$icon-font-path: "../fonts/"
最终得到正确的格式。
也许这会帮助陷入类似情况的人:-)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)