Assets missing in Angular application built using grunt
I found a neat solution to the CSS problem - SCSS has inbuilt functions for images and this will automatically rewrite paths to assets:
.table.sortable th.sorted-asc { background-image: image-url('uparrow.png'); }
You are facing Yeoman bugs with the build
task which are not fixed yet. I believe there are no clean solutions so here are a few workarounds.
First, image rev:
Just remove images from the rev
task and you will be good to go.
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/*'
]
}
}
},
Secondly, bootstrap-sass fonts are not copied to the dist folder. I spent hours on this bug and couldn't find a proper solution. Finally I decided to add a new rule to the copy
task:
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/*.*']
}]
},
...
}
Run grunt build
again after these changes and it should work.