构建应用程序时,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

    有没有办法告诉 grunt 使用哪个 grunt js 文件 我有一个f a b tools包含的文件夹grunt cmd node exe 我的实际网络应用程序GruntFile js以及所有当地的node modules is in f
  • 找不到具有以下功能的代理:grunt

    当我尝试在本地 TFS 2015 Update 1 上对构建进行排队时 收到以下错误消息 找不到具有以下功能的代理 grunt 我已经安装了NodeJS and grunt cli他们在path 即它们可以从任何位置在 cmd 中执行 我缺
  • 如何在我的角度应用程序中安装 underscore.js?

    我使用 yo angular 通过 bootstrap grunt bower 生成我的 angularjs 模板 我还想在应用程序中使用下划线 npm install underscore save dev 在 MainCtrl 中 我调
  • 当项目中有多个文件时,如何使用 Grunt 配置 LESS 的 sourceMap?

    我有多个 less 文件 我希望将它们处理为匹配的 css 每个文件的 sourceMaps 都与源位于同一文件夹中 这有多难 我用 less 直接执行此操作没有问题 但无法弄清楚如何在 grunt contrib less 中执行此操作
  • 警告:尝试多次加载角度。角JS

    我试图在运行 Grunt Build 后查看我的应用程序 我使用 gruntserve dist 来查看所有生产就绪的构建 但在浏览器中我得到一个无限循环 警告 尝试多次加载角度 我读到发生这种情况是因为 TemplateURL 连接后可能
  • 在 component.json 和 package.json 中定义“package”信息

    我正在创建一个 javascript 库 希望通过 Bower 向我的内部公司提供该库 我正在使用 Grunt 来构建我的库 我的问题是 grunt 的约定是使用package json定义依赖项 库版本 依赖项等 另一方面 鲍尔假设在co
  • 在虚拟机共享目录上运行“grunt”

    将 Vagrant 与 Windows 主机和 Linux 客户机一起使用 grunt尝试运行作业时返回以下错误 据我了解 在主机 来宾共享目录中 此文件路径超出了 Windows 的 255 个字符限制 npm ERR Error EPE
  • Grunt watch 任务似乎需要很长时间

    我正在运行两个简单的任务 每个任务运行时间 spawn to false但这似乎破坏了它 并且没有运行任何相关的任务 以下是更改 sass 文件时的示例输出 gt gt File app styles main scss changed F
  • 无法在 Karma 中安装 phantomJS

    WARN config config configure is deprecated please use config set instead WARN plugin Cannot find plugin karma phantomjs
  • Vagrant 提供,无法启动 grunt

    我正在尝试让 vagrant 安装 nodejs 正常运行所需的所有内容 然后在节点项目的根文件夹上执行 nohup grunt server 之后 我期望服务器在端口 3030 上侦听 但事实并非如此 如果在配置后我这样做 流浪者 ssh
  • 如何使用 Bower_components 中安装的软件包更新 Bower.json

    如何更新bower json已安装的软件包来自bower components bower init没有将我安装的所有软件包添加到bower json 有些明显缺失 bower list无法在一个包上连接到 github 那么这样做的正确方
  • AngularJS with Grunt - 连接到另一台服务器

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

    当我运行 gruntserve 时 它 会自动在 index html 中注入以下代码 我不希望这种事发生 我该如何禁用它 我尝试了所有提到的选项here https stackoverflow com questions 12830159
  • 根据变量值将 LESS 编译为多个 CSS 文件

    有一个指定颜色的变量variables less文件 例如 themeColor B30F55 和一个 json构成实体列表的文件 其中每个键是一个实体 ID 键的值是该实体的颜色 例如 8ab834f32 B30F55 3cc734f31
  • 在 MySQL 连接字符串中指定密码

    我使用 MySQL 作为 DB 和 Yeoman 生成器创建了 ExpressJS MVC 应用程序 并在config js我想更改 MySQL 连接字符串 但我不知道在字符串中指定密码 我的字符串是mysql root localhost
  • Git 与人工制品

    刚刚完成 NPM 和 Bower 的 Artifactory 设置 它非常容易使用 您只需更改存储库 URL 一切就正常了 查看有关如何让 Artifactory 与 github vcs 一起使用的文档 它看起来过于复杂 我想知道是否有人
  • 如何将 PHP 与 yeoman Angular 项目集成

    我在用着yeoman questions tagged yeoman项目使用角js questions tagged angularjs通常我知道如何在普通项目中将 angularjs 与 PHP 结合使用 但我很困惑如何将 php 与 y
  • 等待异步 grunt 任务完成

    我收到了 grunt 设置 其中一个新任务应该执行 grunt task run 已经存在的任务 要执行的任务是异步的 新任务应该等待异步任务完成 执行此操作的首选方法是什么 grunt 已经涵盖了这一点 你应该将你的任务声明为异步任务 并
  • 可以在 Travis 启动的构建上运行 Bower 和 npm 吗?

    我有一个在 GitHub 上托管的项目 https github com njacobs5074 InOutBoard https github com njacobs5074 InOutBoard 运行npm and bower来自 Ma
  • Node.js 问题 :: Angular 未定义 :: 找不到 Bower 包 :: Node gyp 和 Python

    Issue 在浏览器中生成并启动新的 jHipster API 后 我遇到了以下问题 未捕获的引用错误 角度未定义 Before我安装的最新一代 node js yo bower grunt cli 根据指导方针 https jhipste

随机推荐