Brunch bower_component CSS not compiling? (Fancybox) - css

Question

I've tried to follow all these other threads but am unable to get this to work for some reason:
Vendor CSS files not being compiled for Brunch
Separating app and vendor css in Brunch
For some reason, I'm unable to get brunch to ouput vendor CSS at all?
The particular package I'm talking about is Fancybox which has a css file source/jquery.fancybox.css.
I've overridden the fancybox main in my bower.json (as no main is included in the package). For some reason, no css is output, only the javascript. I feel like I must be doing something trivially wrong as no errors are output either and I even see the css file as being watched in the debug output?
Output of brunch b -Pd:
❯ brunch b -Pd > brunch-debug.txt
brunch:watch Loaded plugins: javascript-brunch, sass-brunch +0ms
brunch:watch File 'package.json' received event 'add' +5ms
brunch:watch File 'bower.json' received event 'add' +1ms
brunch:watch File 'brunch-config.coffee' received event 'add' +0ms
brunch:file-list Reading 'bower_components/fancybox/source/jquery.fancybox.js' +1ms
brunch:watch File 'bower_components/fancybox/source/jquery.fancybox.js' received event 'add' +0ms
brunch:file-list Reading 'bower_components/fancybox/source/jquery.fancybox.css' +0ms
brunch:watch File 'bower_components/fancybox/source/jquery.fancybox.css' received event 'add' +0ms
brunch:source-file Initializing fs_utils.SourceFile: {"path":"bower_components/fancybox/source/jquery.fancybox.js","isntModule":true,"isWrapped":true} +1ms
brunch:pipeline Compiling 'bower_components/fancybox/source/jquery.fancybox.js' with 'JavaScriptCompiler' +1ms
brunch:file-list Compiled file 'bower_components/fancybox/source/jquery.fancybox.js'... +40ms
brunch:write Writing 1/1 files +71ms
brunch:generate Concatenating bower_components/fancybox/source/jquery.fancybox.js to public/libraries.js +3ms
brunch:common Writing file 'public/libraries.js' +7ms
I've setup my config files so:
brunch-config.coffee
module.exports = config:
files:
javascripts: joinTo:
'libraries.js': /^(?!app\/)/
'app.js': /^app\//
stylesheets: joinTo:
'vendor.css': /^(bower_components|vendor)\//
'app.css': /^app\//
modules:
wrapper: false
definition: false
bower.json
{
"name": "brunch-test-fancybox",
"version": "0.0.0",
"authors": [
"Test <test#test.com>"
],
"description": "",
"main": "",
"moduleType": [],
"license": "MIT",
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"overrides": {
"fancybox": {
"main": [
"source/jquery.fancybox.css",
"source/jquery.fancybox.js"
]
}
},
"dependencies": {
"fancybox": "~2.1.5"
}
}
package.json
{
"name": "brunch-test-fancybox",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"brunch": "^1.8.5",
"javascript-brunch": "^1.7.1",
"sass-brunch": "^1.9.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

Answer 1

Add the css-brunch plugin to your project, otherwise Brunch does not know how you want to handle .css files.