Grunt bower_concat not adding css

Question

I try to compile all my css from my bower_components using bower_concat https://github.com/sapegin/grunt-bower-concat. The js compiles fine but the css never gets created. Here is my grunt file code for this section:

  bower_concat: {
            all: {
                dest: '<%= pkg.dist_dir %>/lib/_bower.js',
                cssDest: '<%= pkg.dist_dir %>/lib/_bower.css',
                dependencies: {
                    // 'angular': ''
                },
                exclude: [
                    'jquery'
                ],
                bowerOptions: {
                    relative: false
                },
                includeDev: true
            }
        },

It never creates "_bower.css". Why is not working as it should?

Answer 1

grunt-bower-concat (and grunt-wiredep as well) work on the concept of bundling together files mentioned in the main field of the bower.json of the respective package.

Initially there wasn't any specification which defined what should be included in main field of the bower.json file. It was solely up to the package creator to make this choice. Then Define main as the entry-point files, one-per-filetype came (This lead to known libraries like Bootstrap and Font Awesome removing the CSS files from main field, rendering tools like grunt-bower-concat useless without manual override)

mainFiles: {
    package: [ 'path/to/its/file.css' ]
}

Therefore a probable cause of the issue you are facing would be related to the fact that the main field of the bower package that you trying to include doesn't reference the CSS files.

Answer 2

I fixed it according to the config example at the bottom of the page, that is instead adding the destinations in the all parameter, creating the dest parameter and setting js/css destinations individually:

bower_concat: {
  all: {
    dest: {
      'js': 'build/_bower.js',
      'css': 'build/_bower.css'
    }
  }
}