对字体(font-awesome)资源的引用未在 yeoman/Angular grunt 构建中更新

2024-04-25

我知道有关此问题的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(使用前将#替换为@)

对字体(font-awesome)资源的引用未在 yeoman/Angular grunt 构建中更新 的相关文章

  • Angular js gulp sourcemap ngannonate 和 babel 中 JavaScript 堆内存不足

    我在我的 Angular JS 项目中使用 es6 语法 但运行时会抛出错误gulp build 在 github 上搜索 但是有些人说这是由于 gulp uglify 导致的错误 而有些人说这是 babel 问题 其他人说这是 ng an
  • JavascriptError:javascript 错误:等待结果时文档已卸载

    在使用 Protractor e2e 测试运行测试角度应用程序时 我目前面临一个问题 这是一个间歇性的问题 我收到 JavascriptError javascript错误 等待结果时已卸载文档 以下是日志 Failures 18 51 4
  • AngularJS'无法读取未定义的'then'属性'

    我遇到这个问题 当我单击登录按钮时 chrome 控制台会记录以下内容 angular min js 117 TypeError 无法读取未定义的属性 then 在 m scope logIn loginModuleController j
  • 从字符串开头过滤 ng-repeat 元素

    我正在尝试 AngularJS 这是我的第一次尝试 我正在尝试使用 开头为 而不是 包含 之类的内容来过滤对象数组 但我不明白如何做到这一点 假设我有一个elements像这样的数组 amount 50 amount 25 如果我想过滤5两
  • AngularJS:在任何部分页面控制器之前调用特定函数

    我想调用一个特定的函数 GetSession 在我的应用程序加载开始时 这个函数使 http调用并获取会话令牌 GlobalSessionToken从服务器 然后 该会话令牌用于其他控制器逻辑并从服务器获取数据 我已经打电话给这个GetSe
  • 将输入字段中的逗号替换为点

    欧洲国家在输入十进制数字时使用逗号 而不是点 所以我想在用户输入时用逗号替换点号 我知道 input number 可以做到这一点 但我需要对 IE 的支持 我想指令是最好的选择 我用下面的代码尝试了一下 但它失败了 directive r
  • 提交表单时 ng-required 不起作用

    我在带有 required 属性的输入文本框中包含以下代码 但是当我跳出该字段或提交表单时 它不会阻止表单提交并通知用户该字段是必填字段 div class col sm 8 div
  • 如何在 JavaScript 中填充 Angularjs $scope 变量?

    mapApp controller myController function scope http scope namePlaceHolder Name scope name 我将范围变量绑定到 html 输入 如下所示
  • AngularJS + Laravel 5 身份验证

    在使用 AngularJS 构建 SPA 时 我想在 AngularJS 网站中实现用户身份验证 但是 我不知道从哪里开始以及最佳实践是什么 基本上我有一个确定可以担任一个或多个角色 我寻找了一些例子 这样我就可以对如何正确处理这个问题有一
  • 如何使用复杂对象或json在ng-table中添加动态列?

    我有以下 ng table 代码 参见笨蛋 http plnkr co edit oTxkmtAwt22gtO2JDPg4 p preview var app angular module main ngTable controller D
  • 使用 Bower 添加 ui.bootstrap 依赖项

    我正在尝试将 ui bootstrap 依赖项添加到我的角度项目中 我正在使用 yeoman bower 我这样做了 哟有角 Bower 安装 Angular UI 然后我添加到我的 index html 文件中 和 咕噜发球 然后我将 u
  • Angular JS 更改后更新输入字段

    我正在尝试在 Angular 中构建一个简单的计算器 如果我愿意的话 我可以在其中覆盖总数 我有这部分工作 但是当我返回在字段一或字段二中输入数字时 字段中的总数不会更新 这是我的jsfiddlehttp jsfiddle net YUza
  • angular.copy() 和 JSON.parse(JSON.stringify()) 之间的区别?

    有人可以解释 angular copy 和 JSON parse JSON stringify 之间的区别吗 有吗 您会推荐使用什么 angular fromJson angular toJson 与 JSON parse JSON str
  • 如何在具有隔离范围的指令上使用 ng-click?

    当范围在指令上继承时 我可以让 ng click 工作 但在隔离时则不行 UPDATE The point is that I want the click function to be defined as part of the dir
  • Angular2 RxJS从地图函数调用类函数

    我是 Angular 2 和 Observables 的新手 所以如果我的问题微不足道 我深表歉意 无论如何 我正在尝试使用 RxJS 测试 Angular 2 HTTP 客户端 虽然我让它工作了 但我需要向我当前正在处理的服务添加更多逻辑
  • 嵌套 ng 网格?

    我们可以制作一个嵌套的 ng grid 像这样的事情 有可能吗 这是笨蛋 http plnkr co edit hYuFfxLR38LA0clIkF48 p preview http plnkr co edit hYuFfxLR38LA0c
  • grunt-contrib-watch 导致超出最大调用堆栈大小

    当我执行 clean 任务 grunt clean 时 一切都按预期工作 但是当我运行 watch 任务 grunt test 时 出现以下错误 util js 35 var str String f replace formatRegEx
  • 如何使用指令定义的“replace”?

    在本文档中 http docs angularjs org guide directive http docs angularjs org guide directive 它说有一个replace指令的配置 template 用 HTML
  • 如何在Android上获取角度中的按键事件?

    我们如何在 Android 上的 Angular 中获取按键事件及其值 我使用phonegap Cordova Angular JS
  • 是否可以动态导入模块?

    我有很多角度组件的导入 看起来我可以编写一个函数来简化导入 我只是不知道怎么做 但这应该很简单 进口样本 import DashboardComponent from app components dashboard dashboard c

随机推荐

  • 未捕获的错误:期望增强器是一个函数

    我试图从组件调用减速器并希望在组件中渲染它 但是当我尝试将减速器存储在 redux 的 createStore 方法中时 出现了上述错误 我的代码是这样的 import applyMiddleware compose createStore
  • Powershell Invoke-RestMethod 授权标头

    当调用一个Invoke RestMethod使用 Powershell 例如 Invoke RestMethod Method Get Uri https google com api GetData Headers headers and
  • Pandas 读取缺少一个标头的 csv

    我正在尝试使用 Pandas 读取 csv 文件 但第一列包含用逗号分隔的名字和姓氏 这会导致 Pandas 认为有 5 列而不是 4 列 因此最后一列现在没有标题 因此无法选择它 该文件如下所示 CustomerName ClientID
  • 在 SQL 中将字符串拆分为多行

    我继承了一个数据库 在努力使其更干净 更有用的过程中 我遇到了以下问题 将文件列移动到单独的表后 我现在的任务是将这些文件分成不同的行 请看我下面的例子 key jobid files 1 30012 file1 pdf file2 pdf
  • SSRS 聚合聚合

    这两天我都在用头撞墙 我的场景是这样的 我有一个记录集 在 SSRS 表中分为 4 组 他们是 StartPeriod gt Area gt Job gt Details 相关列包含两个不同的记录计数 一个是有错误的记录数 另一个是该组的记
  • SWI-Prolog 中的约束编程

    我想要一个包含三个元素 A B 和 C 的列表 L 并具有以下约束 use module library clpfd L A B C L ins 1 3 A B C 但是 它给出了一个错误 Syntax error Operator exp
  • UIViewController 弹出时未释放

    我有一个表视图 当选择一个单元格时 它将视图控制器推送到导航堆栈上 SAPostTableViewController postViewController SAPostTableViewController alloc initWithN
  • android kotlin java.io.FileNotFoundException:/storage/emulated/0/number.txt:打开失败:EACCES(权限被拒绝)

    我正在使用 kotlin 为 Android 10 编写一个应用程序 该应用程序必须读取名为number txt来自内部存储 但它总是失败 java io FileNotFoundException storage emulated 0 n
  • 在 Java 8 中使用 Java 7 比较器

    情况 我有一个 OSGi 项目 我正在尝试迁移到 Java 8 在我的项目中 我依赖于我 OSGi fied 的第三方库 只需添加MANIFEST MF文件并将元数据放入其中 这些库是从只读 SVN 存储库中签出的 因此我可以在需要时签出更
  • 在 iframe 中显示缩略图

    我在这方面还很陌生 我有以下内容iframe 我想做的就是让它发挥作用video1 1 但显示其中的图像video1 2 我尝试做的是 但这行不通 有简单的方法吗 iFrame 标记中没有 href 属性 看 http www w3scho
  • Dagger 2:何时使用构造函数注入,何时使用字段注入?

    我有点懒 过去几乎完全使用现场注入 我只是提供空的构造函数 放入我的 Inject 字段 我的一切看起来都很好很简单 然而 字段注入有其权衡 因此我设计了一些简单的规则来帮助我决定何时使用字段以及何时使用构造函数注入 如果我的逻辑有错误或者
  • 如何在android中创建自定义选项菜单

    我正在创建一个选项菜单 它有三个选项 HOME EMAIL VISIT 所有三个选项都位于同一行 我必须在上面显示 主页 选项 并在下面显示 主页 选项中的两个选项 根据所附的屏幕截图 有任何想法吗 谢谢 这是我的 XML 文件 menu
  • 如何在其他src文件夹中包含头文件

    我有一个 C 项目 有两个 src 文件夹 文件夹1中的源文件可能需要包含src文件夹2中的头文件 这可能吗 或者我应该如何编写我的 Makefile 谢谢 根据两个文件夹的相关程度 例如 如果它们是同一个项目 那么它可以很简单 inclu
  • 在改造库中禁用 SSL 证书检查

    我正在使用 android 中的改造来连接服务器 public class ApiClient public static final String BASE URL https example com private static Ret
  • 如何用凸形状形成凹形状?

    我试图绕过只能在 SFML C 库中形成凸形状的规则 为此 我计划测试给定的顶点 如果是凹的 将顶点分成组 测试每个组的凹性 并重复直到得到看起来像的全套凹形形状 就像组合在一起时的原始形状一样 我想知道的是 测试形状凹度的方程式是什么 它
  • 有没有可以解析 ANSI x12 和 UN/EDIFACT 标准中的 EDI 文件的开源 Java 库?

    是否有任何开源java库可以解析EDI文件ANSI X12 and 联合国 电子信息数据库标准 我已经发现smooks http www smooks org 它支持 UN EDIFACT 标准 但不确定是否支持 ANSI X12 标准中的
  • 使用“”元素为 SVG 生成 IMG src 数据 URI

    是否存在安全原因阻止
  • 如何知道一个变量是否只是另一个对象的“指针”或者是否可以独立存在

    App New Object TypeName Microsoft SqlServer Dts Runtime Application PackageFullPath C SSISPackage dtsx Package App LoadP
  • 如何为 tx_news TYPO3 设置面包屑

    我有一个 TYPO3 网站 我需要设置面包屑 对于新闻 我需要显示新闻标题来代替 新闻详细信息 新闻插件的页面标题 如何实施 我的代码是
  • 对字体(font-awesome)资源的引用未在 yeoman/Angular grunt 构建中更新

    我知道有关此问题的SO线程 我在下面链接了它们 但不幸的是我无法用它们解决这个问题 所以请允许我这个问题 我使用 Yeoman 启动了一个 AngularJS 项目 因此依赖于使用 Bower js 和 SCSS 的 grunt js 构建