sass - Yeoman CSS 图像路径

Question

当我构建我的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 文件中更新图像路径？

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

score 8 · Accepted Answer

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

有一个名为“usemin:css”的问题没有为GitHub 上的相对 url 生成正确的图像路径，关于这个特定问题。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 中的相对图像路径，我的问题得到了解答。感谢大家的帮助！

score 0 · Accepted Answer

GruntFile.js您需要调整任务，usemin以便处理引用：

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

检查您是否有此任务配置。

2 回答 2