I have the same problem, and solved.
The image-path in url() in the exported css is converted by the compass task and cssmin task. I wonder if the cssmin task's settings cause this problem rather than those of the compass task.
We expect relative paths to dist/styles (not to the cssDir), so relativeAssets should be set to false, and httpImagesPath to '../images'. You will see url(../images/hoge.jpg) in .tmp/styles/*.css when these options are set.
But relative paths exported from the compass task will be converted back to the absolute paths by the cssmin task. To avoid this, we should set the noRebase option to false in the cssmin task's options.
The following settings in Gruntfile.js are working as expected in my project:
compass: {
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
generatedImagesDir: '.tmp/images/generated',
imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: '<%= yeoman.app %>/bower_components',
httpImagesPath: '../images',
httpGeneratedImagesPath: '../images/generated',
httpFontsPath: '/styles/fonts',
relativeAssets: false,
assetCacheBuster: false,
raw: 'Sass::Script::Number.precision = 10\n'
},
}
cssmin: {
options: {
root: '<%= yeoman.app %>',
noRebase: true
}
}
Additionally, these settings might prevent the conversion to cache-bustered urls (for example, ../images/hoge.jpg -> ../images/43f78e35.hoge.jpg) in the usemin task. To avoid this, I set the following settings in the usemin task's options:
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/styles'] // <- add styles directory
}
}