How to handle bower package that contain plain css file in config file?

[rbudiharso]

the docs said that inside bower.filesNeeded we can specify js, scss, less, and html. What about bower package that include plain css file like bootswatch-dist? I tried with css key, but the css file doesn't get included so the page is unstyled.

'use strict';

module.exports = {
    bower: {
        packages: [
            'http://code.jquery.com/jquery-2.1.0.min.js',
            'bootswatch-dist#3.2.0-lumen'
        ],
        filesNeeded: {
            js: [
                'jquery-2.1.0.min/index.js',
                'bootswatch-dist/js/bootstrap.min.js'
            ],
            css: [
              'bootswatch-dist/css/bootstrap.min.css'
            ]
        }
    },
    port: 9000,
    cssCompiler: 'none',
    testRunner: 'karma',
    useJsHint: true,
    usesAngularJS: false
};

[nickjanssen]

As of 0.10.0 you can include CSS files using a css variable, just like in your example. Check it out! https://github.com/nickjanssen/angus/commit/2c69124933b177702f9fa3944df491ab179bd86b

Feel free to re-open this ticket if you have additional problems.

[rbudiharso]

Awesome :smile:, now for another question, can you combine plain css with less or sass? what would the config file looks like?

[nickjanssen]

Yes, this is supported. If you meant inside your own app: for Less, simply do a regular @include to the CSS file. For Sass, you just have to give the CSS file a .scss extension instead and also @include them.

For library files (filesNeeded), you can just add regular CSS files as well. Your config could look like this:

{
    bower: {
        packages: [
            'bootstrap-sass-official',
            'angular-snap'
        ],
        filesNeeded: {
            scss: [
                'angular-snap/angular-snap.css', // Plain CSS file

                // Core variables and mixins
                'bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss',
                'bootstrap-sass-official/assets/stylesheets/bootstrap/_mixins.scss'
            ]
        }
    }
}