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

**URL:** <https://discuss.emberjs.com/t/pushing-a-css-file-from-an-addon-into-the-host/8857>\
**Category:** Ember CLI\
**Created:** [September 28, 2015, 6:03am UTC](https://discuss.emberjs.com/t/pushing-a-css-file-from-an-addon-into-the-host/8857 "2015-09-28T06:03:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![victor\_stone](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/victor_stone/32/11449_2.png) [@victor\_stone](https://discuss.emberjs.com/u/victor_stone)\
**Post date:** [September 28, 2015, 6:03am UTC](https://discuss.emberjs.com/t/pushing-a-css-file-from-an-addon-into-the-host/8857/1 "2015-09-28T06:03:30Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![victor\_stone](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/victor_stone/32/11449_2.png) [@victor\_stone](https://discuss.emberjs.com/u/victor_stone)\
**Post date:** [September 28, 2015, 5:07pm UTC](https://discuss.emberjs.com/t/pushing-a-css-file-from-an-addon-into-the-host/8857/2 "2015-09-28T17:07:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![beatle](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/beatle/32/13397_2.png) [@beatle](https://discuss.emberjs.com/u/beatle)\
**Post date:** [September 28, 2015, 6:05pm UTC](https://discuss.emberjs.com/t/pushing-a-css-file-from-an-addon-into-the-host/8857/3 "2015-09-28T18:05:59Z")

</div>

`included` hook looks like what you are looking for [importing-dependency-files](http://www.ember-cli.com/extending/#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.

---

<div class="post-metadata">

**Author:** ![victor\_stone](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/victor_stone/32/11449_2.png) [@victor\_stone](https://discuss.emberjs.com/u/victor_stone)\
**Post date:** [September 29, 2015, 1:05am UTC](https://discuss.emberjs.com/t/pushing-a-css-file-from-an-addon-into-the-host/8857/4 "2015-09-29T01:05:00Z")

</div>

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??

---

<div class="post-metadata">

**Author:** ![victor\_stone](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/victor_stone/32/11449_2.png) [@victor\_stone](https://discuss.emberjs.com/u/victor_stone)\
**Post date:** [September 29, 2015, 8:43pm UTC](https://discuss.emberjs.com/t/pushing-a-css-file-from-an-addon-into-the-host/8857/5 "2015-09-29T20:43:33Z")

</div>

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.