6

I am creating ember addons and there are few css styles which this addon requires to work properly!

How do i add them so that when a consuming application uses this addon the particular css styles are directly added to the app.css file of the consuming application?

Eg: addon: dropdown-addon requires a style 

.active-menu {
    background-color: #4183C4;
}

consuming application: online-form

when online-form is using dropdown-addon i want .active-menu to be added to app.css automatically!

wallop
  • 2,510
  • 1
  • 22
  • 39
  • Inside the addon directory, create a styles folder. Inside that, create a css file with your addon's styles. They should be included automatically with the consuming app's css. Thats how I did it for my addon. https://github.com/blessenm/ember-cli-bm-select/blob/master/addon/styles/bm-select.css – blessanm86 May 04 '15 at 12:19
  • are you sure? i already tried it but it didn work! Also i tried it with the dummy testing application! Is it meant to work only with consuming application and not the test dummy application? – wallop May 04 '15 at 12:27
  • Well I tried installing my addon on a new app and the addon css was getting appended to the vendor.css file. Im not sure about the dummy app. I need to do a complete check with the latest version of ember and cli. – blessanm86 May 04 '15 at 14:16
  • right let me check it too and get back! – wallop May 04 '15 at 14:21

1 Answers1

5
  • Create the file vendor/style.css with your custom css
  • In index.js add:
module.exports = {

  //...
  //...

  included: function(app) {
    app.import('vendor/style.css');
  }

  //...
  //...

}

Note: The css code will be added to dist/assets/vendor.css

Ramy Ben Aroya
  • 2,333
  • 14
  • 20
  • hmmm so the key here is "included" hook right! i was looking for this hook. let me confirm and then get back. – wallop May 05 '15 at 05:19
  • This definitely works. You can also import css from your app/styles directory if you're wanting to match the Ember app's code structure. Either way it will be included in your Ember app's `vendor.css` file. – Dennis Jun 16 '16 at 18:31