Import css file from bower package. Is it possible?

[cibernox]

I am trying to create a broccoli-based workflow for the ember-cpm project.

So far its pretty good except for the styles. I haven't found a way to read mocha.css from the bower package.

My fork: https://github.com/cibernox/ember-cpm/tree/broccolify-all-the-things

All works except for the mocha.css file. If I log the content of findBowerTrees() I get this:

[ { dir: 'bower_components/chai', mainFiles: [ 'chai.js' ] },
  { dir: 'bower_components/ember', mainFiles: [ './ember.js' ] },
  { inputTrees: [ [Object], [Object] ],
    options: { overwrite: true } },
  { dir: 'bower_components/jquery', mainFiles: [ 'jquery.js' ] },
  { dir: 'bower_components/mocha', mainFiles: [ 'mocha.js' ] } ]

Apparently broccoli only serves javascript files. Is there a way of serve also a css file?

Maybe I am facing the problem plain wrong. How would you serve a static css file from within a bower package?

[cibernox]

Just to clarify, I made it anyway serving the css file with broccoli-static-compiler. I was just asking if there is a way to serve it with this plugin.

[tonywok]

I'm running into the same problem. I'm using ember-cli. To get it working, I use the following hack.

Normally ember-cli's Brocfile looks like this at the end:

module.exports = app.toTree()

I've modified mine to do the following:

var pickFiles = require('broccoli-static-compiler');
var mergeTrees  = require('broccoli-merge-trees');

// get a hold of the tree in question
var pikaday = pickFiles('vendor', {
  srcDir: '/pikaday/css',
  files: [
    'pikaday.css'
  ],
  destDir: '/assets/'
});

// default tree to export
var emberApp = app.toTree();

// shim my stuff
module.exports = mergeTrees([emberApp, pikaday], {
  overwrite: true
});

If I print out the tree that broccoli-bower finds, it appears to pick up the javascript file and the css file. The former is then picked up by the es6 compiler (which accepts "legacy files to append"). Unfortunately the latter is left behind. That said, it seems that all the pieces are there. So perhaps this is an ember-cli issue, as they are hardcoding looking in the styles directory. I'll keep digging.

[johnjelinek]

Similarly, I'm trying to have bootstrap-sass accessible during my build. So I have a file like this:

$ cat styles/app.scss
@import 'client/js/node_modules/bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';

Is there a good way to do something like @import bootstrap and somehow have broccoli-bower find this?

Here's my Brocfile.js:

var compileSass = require('broccoli-sass')
var pickFiles = require('broccoli-static-compiler')
var mergeTrees = require('broccoli-merge-trees')
var findBowerTrees = require('broccoli-bower')

var styles = 'styles'
styles = pickFiles(styles, {
    srcDir: '/',
    destDir: 'appkit'
})

var sourceTrees = [styles]
sourceTrees = sourceTrees.concat(findBowerTrees())

var appCss = compileSass(sourceTrees, 'appkit/app.scss', 'assets/app.css')

var publicFiles = 'public'

module.exports = mergeTrees([appCss, publicFiles])

[johnjelinek]

Also, is there a way that I can get the javascripts/fonts assets listed in findBowerTrees into my publicFiles tree?

[johnjelinek]

I ended up with something like this:

var compileSass = require('broccoli-sass')
var pickFiles = require('broccoli-static-compiler')
var mergeTrees = require('broccoli-merge-trees')
var findBowerTrees = require('broccoli-bower')
var bootstrapAssetPath = findBowerTrees()[0].dir + '/vendor/assets/'

var styles = 'src/styles'
styles = pickFiles(styles, {
    srcDir: '/',
    destDir: 'scss'
})
var appCss = compileSass([styles], 'scss/app.scss', 'css/app.css')

var bootstrapFonts = pickFiles(bootstrapAssetPath, {
    srcDir: 'fonts',
    destDir: 'fonts'
})

var bootstrapJs = pickFiles(bootstrapAssetPath, {
    srcDir: 'javascripts',
    destDir: 'js'
})

var markup = 'src/html'
markup = pickFiles(markup, {
    srcDir: '/',
    destDir: '/'
})

module.exports = mergeTrees([bootstrapFonts, bootstrapJs, appCss, markup])

I still had to leave the full path in the @import statement for my .scss though.