构建应用程序时,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 供应商图像路径不正确 的相关文章

  • 构建 Yeoman 应用程序会破坏 CSS 背景图像

    我正在尝试将现有项目迁移到 Yeoman Grunt Bower 更改里面的路径后Gruntfile js我注意到图像路径没有正确构建 background transparent url Users lucian Projects PRO
  • Grunt 中的“验证配置中是否存在属性 ___”是什么意思?

    我有一个用 Coffeescript 编写的简单 Gruntfile use strict module exports grunt gt config src app dist build grunt initConfig config
  • 找不到具有以下功能的代理:grunt

    当我尝试在本地 TFS 2015 Update 1 上对构建进行排队时 收到以下错误消息 找不到具有以下功能的代理 grunt 我已经安装了NodeJS and grunt cli他们在path 即它们可以从任何位置在 cmd 中执行 我缺
  • 未捕获的类型错误:angular.lowercase 不是函数

    未捕获的类型错误 angular lowercase 不是函数 我的 angularjs 应用程序中出现此错误 并且整个应用程序未运行 这是它的表现textAngular sanitize js 413 无法调试 我尝试使用与 angula
  • grunt-contrib-build' 不在 npm 注册表中

    当我尝试安装时出现以下错误npm install grunt contrib build save dev在我的 Windows 7 系统上使用命令提示符 C css base gt npm install grunt contrib bu
  • 警告:尝试多次加载角度。角JS

    我试图在运行 Grunt Build 后查看我的应用程序 我使用 gruntserve dist 来查看所有生产就绪的构建 但在浏览器中我得到一个无限循环 警告 尝试多次加载角度 我读到发生这种情况是因为 TemplateURL 连接后可能
  • Bower:安装 2 个版本的 jQuery

    我将如何安装 2 个版本的 jQuery使用凉亭 我想要 v2 0 以及 1 9 1 来支持浏览器回退 我遇到的问题是如果你跑bower install jquery 1 9 1 jquery 2 0 0第一个版本被第二个版本覆盖 因为它们
  • 错误:$compile:tpload 无法加载模板 Http 状态:404

    当我尝试使用 Angular 运行本地项目时 我从 Chrome 收到 404 状态 我不确定问题出在哪里 并且我已经尝试过类似问题的建议答案 这是我的指令文件 use strict ngdoc directive name stockDo
  • 对字体(font-awesome)资源的引用未在 yeoman/Angular grunt 构建中更新

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

    我正在运行两个简单的任务 每个任务运行时间 spawn to false但这似乎破坏了它 并且没有运行任何相关的任务 以下是更改 sass 文件时的示例输出 gt gt File app styles main scss changed F
  • 使用 grunt 从 browserify 生成源映射

    我已按照此处的说明进行操作 https www npmjs org package grunt browserify https www npmjs org package grunt browserify 尝试在 grunt 上为 bro
  • 使用 Bower 添加 ui.bootstrap 依赖项

    我正在尝试将 ui bootstrap 依赖项添加到我的角度项目中 我正在使用 yeoman bower 我这样做了 哟有角 Bower 安装 Angular UI 然后我添加到我的 index html 文件中 和 咕噜发球 然后我将 u
  • Grunt-browserify+mapify+coffeescript = 未通过相对路径找到模块

    我尝试让 grunt browserify 使用 Coffeescript 的相对路径 但当我尝试构建源代码时总是收到错误消息 gt gt Error module src app utils includeMixin not found
  • gruntjs - 命令行参数

    在哪里可以获得命令行参数的句柄 eg grunt dist env UAT 我如何获得价值env 当我这样做时 如果未在命令行上设置它 我将如何为其分配默认值 您可以使用grunt option 或者更具体地说 var env grunt
  • VS 2015 + Bower:在防火墙后面不起作用

    Problem 在 Visual Studio 2015 中 使用 Bower 我的包在防火墙后面时恢复失败 并出现类似以下内容的错误 ECMDERR 无法执行 git ls remote tags heads git github com
  • 在 MySQL 连接字符串中指定密码

    我使用 MySQL 作为 DB 和 Yeoman 生成器创建了 ExpressJS MVC 应用程序 并在config js我想更改 MySQL 连接字符串 但我不知道在字符串中指定密码 我的字符串是mysql root localhost
  • 如何让 Grunt.js 和 Meteor.js 协同工作?

    我想在我的 Meteor 应用程序中使用简单的复制和串联 但是当 Meteor 在服务器和客户端上运行所有 javascript 文件时 我遇到了问题 而我不希望它们在任何地方运行 它要么只是配置文件 例如Gruntfile js或我想以某
  • 如何在 yeoman/grunt 项目中自动包含脚本?

    我有一个正在工作的自耕农项目 我正在使用 grunt usemin 为了包含 javascript 我在以下位置执行此操作index html
  • 如何让 Heroku 安装 devDependency?

    我希望 Heroku 在推送应用程序后构建我的应用程序 这样我就不必每次进行更改时都将构建文件夹向上推送 然而 Heroku 仅安装来自package json和 grunt 我的构建工具 及其所有组件都在devDependencies 我
  • 等待异步 grunt 任务完成

    我收到了 grunt 设置 其中一个新任务应该执行 grunt task run 已经存在的任务 要执行的任务是异步的 新任务应该等待异步任务完成 执行此操作的首选方法是什么 grunt 已经涵盖了这一点 你应该将你的任务声明为异步任务 并

随机推荐