Yeoman供应商图片路径在构建应用程序时不正确 [英] Yeoman vendor images paths are incorrect when building the application
问题描述
应用程序依赖于与Bower一起安装的jQuery UI。这是我如何包含jQuery UI主题：
<！ - build：css styles / plugins.css - > ;
< link rel =stylesheethref =components / jquery.ui / themes / base / jquery.ui.core.css/>
< link rel =stylesheethref =components / jquery.ui / themes / base / jquery.ui.accordion.css/>
< link rel =stylesheethref =components / jquery.ui / themes / base / jquery.ui.autocomplete.css/>
< link rel =stylesheethref =components / jquery.ui / themes / base / jquery.ui.button.css/>
< link rel =stylesheethref =components / jquery.ui / themes / base / jquery.ui.datepicker.css/>
< link rel =stylesheethref =components / jquery.ui / themes / base / jquery.ui.dialog.css/>
< link rel =stylesheethref =components / jquery.ui / themes / base / jquery.ui.menu.css/>
< link rel =stylesheethref =components / jquery.ui / themes / base / jquery.ui.progressbar.css/>
< link rel =stylesheethref =components / jquery.ui / themes / base / jquery.ui.resizable.css/>
< link rel =stylesheethref =components / jquery.ui / themes / base / jquery.ui.selectable.css/>
< link rel =stylesheethref =components / jquery.ui / themes / base / jquery.ui.slider.css/>
< link rel =stylesheethref =components / jquery.ui / themes / base / jquery.ui.spinner.css/>
< link rel =stylesheethref =components / jquery.ui / themes / base / jquery.ui.tabs.css/>
< link rel =stylesheethref =components / jquery.ui / themes / base / jquery.ui.tooltip.css/>
< link rel =stylesheethref =components / jquery.ui / themes / base / jquery.ui.theme.css/>
<！ - endbuild - >
在构建应用程序时，一切顺利，没有错误。
然而，在浏览器控制台（使用Chrome）中，我可以看到jQuery UI Datepicker所需的图像无法找到，因为它看起来在 styles / images / ，它们实际上位于组件/...中。
strong>
我的第一个想法是重写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 文件夹下）
之前：
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'
}
]
$ / code> 希望这有助于您！
I'm working on an AngularJS application with Yeoman.
The application depends on jQuery UI, which is installed with Bower. This is how I include the jQuery UI theme:
<!-- 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 -->
When building the application, all goes well, without errors.
However, in the browser console (using Chrome), I can see that the images required by the jQuery UI Datepicker can't be found because it looks inside styles/images/ and they actually are inside components/....
Screenshot
My first idea was to override the jQuery UI image paths in CSS, but that doesn't seem like the best solution. Example:
Original styling
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/;
}
My override
.ui-widget-header .ui-state-error {
background-image: url(../components/jquery.ui/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png);
}
Any recommended solutions?
I had the same problem. But rather than changing the jQuery CSS (which could be harmful for future updates...), I just tweaked the "imagemin" task in the grunt script (Gruntfile.js) so that the images are copied where they are expected. This is true for any third party library as long as grunt takes care of modifying images pathes in the minified css.
Here is the change I made (please note that my jQuery UI theme folder is located under the 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'
}
]
}
}
Hope this helps !
这篇关于Yeoman供应商图片路径在构建应用程序时不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
