Brunch bower_component CSS not compiling? (Fancybox)

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

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 <[email protected]>"
  ],
  "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"
}

es128 es128 · Accepted Answer · 2015-10-04T12:35:22

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

Brunch bower_component CSS not compiling? (Fancybox)

1 Answers