构建应用程序时,Yeoman 供应商图像路径不正确

2023-12-27

我正在与 Yeoman 一起开发 AngularJS 应用程序。

该应用程序依赖于 jQuery UI,它随 Bower 一起安装。这就是我包含 jQuery UI 主题的方式:

<!-- build:css styles/plugins.css -->
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.core.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.accordion.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.autocomplete.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.button.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.datepicker.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.dialog.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.menu.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.progressbar.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.resizable.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.selectable.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.slider.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.spinner.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.tabs.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.tooltip.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.theme.css" />
<!-- endbuild -->

构建应用程序时,一切顺利,没有错误。

但是,在浏览器控制台(使用 Chrome)中,我可以看到 jQuery UI Datepicker 所需的图像找不到,因为它看起来在里面styles/images/他们实际上在里面components/....

截屏

我的第一个想法是覆盖 CSS 中的 jQuery UI 图像路径,但这似乎不是最好的解决方案。例子:

原创造型

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/;
}

我的覆盖

.ui-widget-header .ui-state-error {
    background-image: url(../components/jquery.ui/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png);
}

有推荐的解决方案吗?


我有同样的问题。但我没有更改 jQuery CSS(这可能对未来的更新有害...),而是调整了 grunt 脚本 (Gruntfile.js) 中的“imagemin”任务,以便将图像复制到预期的位置。对于任何第三方库来说都是如此,只要 grunt 负责修改缩小的 css 中的图像路径。

这是我所做的更改​​(请注意,我的 jQuery UI 主题文件夹位于app\styles folder)

Before :

imagemin : {
    dist : {
        files : [{
                expand : true,
                cwd : '<%= yeoman.app %>/images',
                src : '{,*/}*.{png,jpg,jpeg}',
                dest : '<%= yeoman.dist %>/images'
            }
        ]
    }
}

After :

imagemin : {
    dist : {
        files : [{
                expand : true,
                cwd : '<%= yeoman.app %>/images',
                src : '{,*/}*.{png,jpg,jpeg}',
                dest : '<%= yeoman.dist %>/images'
            }, {
                expand : true,
                flatten : true,
                cwd : '<%= yeoman.app %>/styles',
                src : '**/*.{png,jpg,jpeg,gif}',
                dest : '<%= yeoman.dist %>/styles/images'
            }
        ]
    }
}

希望这可以帮助 !

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

构建应用程序时,Yeoman 供应商图像路径不正确 的相关文章

  • 找不到具有以下功能的代理:grunt

    当我尝试在本地 TFS 2015 Update 1 上对构建进行排队时 收到以下错误消息 找不到具有以下功能的代理 grunt 我已经安装了NodeJS and grunt cli他们在path 即它们可以从任何位置在 cmd 中执行 我缺
  • 错误代码尝试从不存在的源进行复制

    因为我在这里关注 VS code 插件 扩展教程您的第一个扩展 Visual Studio 代码扩展 API https code visualstudio com api get started your first extension
  • 如何在我的角度应用程序中安装 underscore.js?

    我使用 yo angular 通过 bootstrap grunt bower 生成我的 angularjs 模板 我还想在应用程序中使用下划线 npm install underscore save dev 在 MainCtrl 中 我调
  • 警告:尝试多次加载角度。角JS

    我试图在运行 Grunt Build 后查看我的应用程序 我使用 gruntserve dist 来查看所有生产就绪的构建 但在浏览器中我得到一个无限循环 警告 尝试多次加载角度 我读到发生这种情况是因为 TemplateURL 连接后可能
  • 错误:$compile:tpload 无法加载模板 Http 状态:404

    当我尝试使用 Angular 运行本地项目时 我从 Chrome 收到 404 状态 我不确定问题出在哪里 并且我已经尝试过类似问题的建议答案 这是我的指令文件 use strict ngdoc directive name stockDo
  • 在虚拟机共享目录上运行“grunt”

    将 Vagrant 与 Windows 主机和 Linux 客户机一起使用 grunt尝试运行作业时返回以下错误 据我了解 在主机 来宾共享目录中 此文件路径超出了 Windows 的 255 个字符限制 npm ERR Error EPE
  • 对字体(font-awesome)资源的引用未在 yeoman/Angular grunt 构建中更新

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

    我使用 yeoman 角度生成器创建了一个 AngularJS 应用程序 现在我想使用 Apache tomcat 托管它 我已经运行了 grunt build 并将所有资产准备在 dist 文件夹中 有没有办法创建 war 文件 或者我可
  • 为什么 Yeoman 构建时没有字形图标?

    我正在研究一个webapp发电机及运行后grunt我有一个可以正确显示字体的功能应用程序 然而 当我检查dist 目录我没有得到任何字体文件 文档指出grunt命令build the application for deployment 但
  • Vagrant 提供,无法启动 grunt

    我正在尝试让 vagrant 安装 nodejs 正常运行所需的所有内容 然后在节点项目的根文件夹上执行 nohup grunt server 之后 我期望服务器在端口 3030 上侦听 但事实并非如此 如果在配置后我这样做 流浪者 ssh
  • 用于开发/生产环境的备用 grunt.js 任务

    我真的很希望能够拥有一个开发 grunt 文件并使用相同的文件作为脚本的生产版本 我已经尝试过建议 但是当尝试调用 dev prod 参数时 我的脚本将会失败 我相信答案是针对旧版本的 grunt 或者可能是我正在使用的插件 module
  • 为什么要检查 Bower 组件?

    鲍尔文档说 注意 如果您没有编写供其他人使用的包 例如 您正在构建 Web 应用程序 则应始终将已安装的包签入源代码管理 有谁能很好地回答为什么吗 如果我正在制作一个网络应用程序 我不希望我的存储库因库 X 版本的更新而混乱 我只想更新 B
  • Grunt-browserify+mapify+coffeescript = 未通过相对路径找到模块

    我尝试让 grunt browserify 使用 Coffeescript 的相对路径 但当我尝试构建源代码时总是收到错误消息 gt gt Error module src app utils includeMixin not found
  • AngularJS with Grunt - 连接到另一台服务器

    我使用 grunt bower 和 yeoman 创建了一个 AngularJS 应用程序 我猜想 Gruntfile js 在 2014 年 1 月之后发生了变化 不确定 这是我的gruntfile js Generated on 201
  • 列出 grunt.js 任务

    我正在尝试弄清楚如何打印所有可用的 grunt 任务的列表 如果使用耙子 则为 rake T grunt 相当于什么 例如 grunt T concat jasmine minify grunt help列出可用的任务
  • Node WebKit 和 YouTube:chrome 未定义

    我正在开发一个应用程序Android iOS Mac OS and Windows using PhoneGap and Node WebKit 该应用程序已嵌入youtube videos These youtube视频在我的中运行良好M
  • 如何在 grunt 中停止缩小 js 文件?

    我是咕噜声的新手 我的项目中有近20 30个js文件 我开始知道我们已经在使用 grunt 来缩小和连接它们 出于调试目的 我需要停止缩小 但以串联形式保留它们 任何人都可以建议如何继续 任何有相关教程的网站都会有帮助 提前致谢 modul
  • Node.js 问题 :: Angular 未定义 :: 找不到 Bower 包 :: Node gyp 和 Python

    Issue 在浏览器中生成并启动新的 jHipster API 后 我遇到了以下问题 未捕获的引用错误 角度未定义 Before我安装的最新一代 node js yo bower grunt cli 根据指导方针 https jhipste
  • yeoman 错误 对等点无效 对等点 [电子邮件受保护] 想要@>=1.2.0

    Running npm install g generator webapp在末尾给出这个npm debug log file 18875 error peerinvalid The package yo does not satisfy
  • 使用最新的不稳定分支生成 Angularjs 应用程序?

    刚开始使用 Yeoman 并喜欢它 但是 我正在构建一个依赖于一些 Angular 1 1 x 功能的应用程序 ng trim and ng animate 并且 Angular generator 使用最新的稳定分支作为默认分支 但不包含

随机推荐