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

Question

我正在与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); 
} 

任何推荐的解决方案？

Answer 1

我有同样的问题。但是，我并没有改变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' 
      } 
     ] 
    } 
} 

希望这可以帮助 ！