Yeoman CSS图像路径 [英] Yeoman CSS image paths

问题描述

在构建我的 Yeoman 项目（没什么特别的，我只使用jQuery和Modernizr）时，使用的图像

When I build my Yeoman project (nothing special, I'm only using jQuery and Modernizr), the images used with CSS aren't shown.

我的CSS代码

.contact {
    background:url(../icon-contact.png) no-repeat top center;
}

构建应用后的输出（无差异）

.contact {background:url(../icon-contact.png) no-repeat top center;}

此操作无效，因为icon-contact.png的文件名已更改为 f91724e0.icon- contact.png 。

This doesn't work because the filename of icon-contact.png has changed to f91724e0.icon-contact.png.

如何确保在缩小的CSS文件中更新了图像路径？

How can I make sure that the image-paths are updated in the minified CSS-file?

编辑：我已经将解决​​方案添加为答案

推荐答案

更新（2014年2月24日）

您可以通过添加<％= yeoman.dist％>来解决此问题; / images 到usemin任务的 assetsDirs 。参见 http://www.github.com/yeoman/yeoman/issues / 824＃issuecomment-32691465

Update (24 Feb. 2014)

You can fix this by adding <%= yeoman.dist %>/images to the assetsDirs of the usemin task. See http://www.github.com/yeoman/yeoman/issues/824#issuecomment-32691465

存在一个名为> usemin：css无法针对GitHub上的相对网址生成正确的图片路径，以解决此特定问题。 Tak Tran 已成为Yeoman的一个分支并实施了修复。

There is an issue named "usemin:css" doesn't generate correct image paths for relative urls on GitHub about this particular problem. Tak Tran has made a branch of Yeoman and implemented a fix.

这是我删除当前Yeoman安装并安装Tak Tran分支版本的方法：

Here is how I removed the current Yeoman installation and installed the branched-version of Tak Tran:

npm uninstall yeoman -g
git clone git://github.com/taktran/yeoman.git
cd yeoman/cli
npm install -g
npm link

来源： https://github.com/ yeoman / yeoman / wiki / Additional-FAQ

通过此修复程序，Yeoman将在CSS中重命名相对图像路径，并回答了我的问题。谢谢大家的帮助！

With this fix, Yeoman wil rename relative image-paths in CSS and my question is answered. Thanks everyone for the help!

这篇关于Yeoman CSS图像路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！