Where to add css files using the Yeoman workflow - gruntjs

Question

I have an angular setup using Yeoman. Under my main.html (a view loaded onto index.html), I have added a referenced a css file in my styles folder.
I surrounded it with the build comments so that it can be picked up by grunt while minimizing:
<!-- build:css({.tmp,app}) styles/calendar.css -->
<link rel="stylesheet" href="styles/fullcalendar.css" />
<!-- endbuild -->
However, when I build using grunt (with the basic yeoman grunt configuration), it does not seem to create the calendar.css file. I suspect that this may be because the main.html file is within views/main.html.
From my grunt file:
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
dirs: ['<%= yeoman.dist %>']
}
},
...
cssmin: {
// By default, your `index.html` <!-- Usemin Block --> will take care of
// minification. This option is pre-configured if you do not wish to use
// Usemin blocks.
// dist: {
// files: {
// '<%= yeoman.dist %>/styles/main.css': [
// '.tmp/styles/{,*/}*.css',
// '<%= yeoman.app %>/styles/{,*/}*.css'
// ]
// }
// }
},
It does not look to within the views directory. I suspect that I am using the workflow incorrectly.
How does one include a css file that is specific to a view?
Also, what does the comments in cssmin block mean?
Thanks!

Answer 1

I've got the answer!
A bit more configuration is required in Gruntfile.js, since you're using a custom workflow. (Ignore if you've already done these).
First, the copy task needs to be updated to copy your app/views directory to dist/views. That's an easy enough fix:
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'images/{,*/}*.{webp,gif}',
'styles/fonts/*',
'views/*'
]
}]
},
// ...
}
Cool cool. Now, useminPrepare, which runs before your stuff is copied over, needs to know about the views directory, as well.
useminPrepare: {
options: {
dest: '<%= yeoman.dist %>'
},
html: [
'<%= yeoman.app %>/index.html',
'<%= yeoman.app %>/views/*.html'
]
},
Woot woot! That's it!
Let me know if you get stuck anywhere!