Yeoman CSS 图像路径答案

【问题标题】：Yeoman CSS image pathsYeoman CSS 图像路径
【发布时间】：2012-12-28 07:21:27
【问题描述】：

当我构建我的Yeoman 项目（没什么特别的，我只使用 jQuery 和 Modernizr）时，没有显示与 CSS 一起使用的图像。

我的 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。

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

编辑：我已添加我的解决方案作为答案

【问题讨论】：

【解决方案1】：

在GruntFile.js中你需要适配usemin任务，这样引用才会被处理：

// update references in HTML/CSS to revved files
    usemin: {
      html: ['**/*.html'],
      css: ['**/*.css']
    },

检查你是否有这个任务配置。

【讨论】：

我在GruntFile.js 中有这些行。我添加了scss: ['**/*.scss']，这会更新最终 CSS 文件中的文件名。但是路径不正确。我得到background: url('/app/images/icon-contact.png?1357818720');，但我希望它是background: url(../images/icon-contact.png?1357818720);
我可能是错的，但是您应该更改指南针任务的配置吗？ images_dir 属性可能需要是“../images”。或 generated_images_dir
这与 Yeoman 中的一个“错误”有关。我已经发布了对我有用的答案。

【解决方案2】：

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

GitHub 上有一个名为 "usemin:css" doesn't generate correct image paths for relative urls 的问题与此特定问题有关。 Tak Tran 已经创建了 Yeoman 的一个分支并实施了修复。

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

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

通过此修复，Yeoman 将重命名 CSS 中的相对图像路径，我的问题得到了解答。感谢大家的帮助！

【讨论】：

您可以通过将'<%= yeoman.dist %>/images' 添加到usemin 任务的assetsDirs 来解决此问题。见github.com/yeoman/yeoman/issues/824#issuecomment-32691465
很高兴它有效！我已添加我的评论作为答案的更新。
太棒了。在该线程上还有其他几种方法。