我已经使用Yeoman和AngularJS(以及所有与之相关的东西，如Grunt和Bower)构建了一个应用程序。
使用grunt serve在本地运行时，这一切都可以完美运行。 但是，在运行grunt并部署应用程序后，缺少一些资产，我不确定解决它的最佳方法是什么。
首先，运行 Grunt 似乎将图像复制到 dist，但它在不调整 CSS 中的引用的情况下重命名它们。app/images/uparrow.png变得dist/images/3f84644a.uparrow.png.
这是main.scss中的一行：
.table.sortable th.sorted-asc { background-image: url(../images/uparrow.png); }
当它在构建过程中编译为 CSS 时，它不会重写路径，因此浏览器会尝试加载缺少的路径dist/images/uparrow.png。
其次，加载 Bootstrap 插件的字体存在问题。app/bower_components/bootstrap/dist/css/bootstrap.css处的引导 CSS 引用../fonts/glyphicons-halflings-regular.woff。 相对路径解析为app/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof，并且效果很好。
但是，一旦构建，供应商CSS就会被合并并缩小为一个CSS文件，dist/styles/8727a602.vendor.css。 不过，字体的相对路径不会被重写。 因此，它尝试在dist/fonts文件夹中查找字体，而不是dist/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof文件的实际位置。
任何建议非常感谢。
您正面临着尚未修复的build任务的 Yeoman 错误。我相信没有干净的解决方案，所以这里有一些解决方法。
首先，图像修订：
只需从rev任务中删除图像，您就可以开始了。
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/scripts/{,*/}*.js',
'<%= yeoman.dist %>/styles/{,*/}*.css',
// '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', <- remove that line
'<%= yeoman.dist %>/styles/fonts/*'
]
}
}
},
其次，引导字体不会复制到 dist 文件夹。我花了几个小时在这个错误上，找不到合适的解决方案。最后，我决定向copy任务添加一个新规则：
copy: {
dist: {
files: [{
// your existing rules...
},
// add this rule to copy the fonts:
{
expand: true,
flatten: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>/fonts',
src: ['bower_components/sass-bootstrap/fonts/*.*']
}]
},
...
}
在这些更改之后再次运行grunt build，它应该可以工作。
我找到了解决CSS问题的巧妙解决方案 - SCSS具有内置的图像功能，这将自动重写资产的路径：
.table.sortable th.sorted-asc { background-image: image-url('uparrow.png'); }
带有根选项的cssmin替换所有相对路径。
您可以在Gruntfile中停用cssmin的根选项.js
cssmin: {
options: {
//root: '<%= yeoman.app %>'
}
},
我遇到了完全相同的问题，我通过以下方式解决了它：
1.将引导字体添加到复制任务(在 gruntfile 内)：
{
expand: true,
cwd: ‘src/main/webapp/bower_components/bootstrap/dist’,
src: ‘fonts/*’,
dest: ‘<%= yeoman.dist %>/assets/’
}
这将复制您的dist/assests/fonts文件夹中的引导字体。
2.删除 cssmin 任务或注释掉根参数。这应该可以解决您在路径方面的问题。
有关更多信息，请查看这篇文章，其中包括深刻的解释：