7

我正在使用 Yeoman 开发 AngularJS 应用程序。

该应用程序依赖于与 Bower 一起安装的 jQuery UI。这就是我包含 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);
}

有什么推荐的解决方案吗？

4

1 回答 1

7

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

这是我所做的更改​​（请注意我的jQuery UI主题文件夹位于该app\styles文件夹下）

前 ：

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

后 ：

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'
            }
        ]
    }
}

希望这可以帮助 ！

于 2013-06-06T22:08:29.803 回答