Where to add css files using the Yeoman workflow

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!