Pushing a CSS file from an addon into the host (?)

Ember CLI
1

So I got an addon working great - pushing everything under the ./app directory and even a 3rd party bower component into the hosted app BUT there a CSS file I’d like to include along with my component and for the life of me I can’t figure out where to put what file or line of code to get into the final host’s vendor.css.

The more detailed steps the better since this is my first ember project and I’m groping a little…

Thanks!

2

do I wrap it in a bower component and push it in my blueprint index.js with the 3rd party component?

3

included hook looks like what you are looking for importing-dependency-files.

And yes. In order to include your css file you should add dependency on bower package which contains your css file. That’s a mission for your addon’s blueprint as you mentioned above.

4

Hey thanks for the pointers - it wasn’t clear to me that a css file originating from my project had to be packaged as a separate bower component like the 3rd party’s.

The latest hang up:

So I created a new github repo with an empty index.js, bower.json and the css file.

If I install it manually from the command line:

bower install --save git://github.com/my-name/my-bower-thingy.git#master

then it installs perfectly fine (!)

But if I put the same configuration into the blueprint/index.js:

     afterInstall: function(options) {
     var packages = [
       { 
         name: 'my-bower-thingy',
         target: 'git://github.com/my-name/my-bower-thingy.git#master'
       },
      {
         name: 'ember-cli-soundmanager-shim',
         target: '~0.0.1'
      }
    ];
    return this.addBowerPackagesToProject( packages );
 }

The ember install of my addon fails saying

Package my-bower-thingy not found

Are direct repo pointers not accepted by the runtime installer? or am I missing something??

5

OK - I got it sorry for not looking closer - I get it now: what I really needed was one of the treeFor* guys to setup a vendor path, basically anywhere in my addon project:

  // ./index.js
  treeForVendor: function() {
    var np = this.project.nodeModulesPath;
    return np + '/ember-cli-my-addon/vendor';
  },

  included: function(app) {
    app.include('vendor/my-component.css');
  }

So I’m no longer dealing with a bower package to wrap it but there still seems to be a bug (or likely a misunderstanding on my part) about using git:// url’s in the blueprint

Thanks again - hope this helps somebody else.