Adding styles from inside an addon to the consuming addon


#1

I’m currently working on a project where we are building a number of addons that we will distribute for our teams to use in their own ember-cli projects.

One of these is a base theme that they can use, but will also allow them to update it for their specific project.

As part of this we want to allow them to create their own addon that consumes our base addon, make their customizations to it, and re-distribute it as a base for their multiple applications.

In our base addon we are using ember-cli-sass and bootstrap-sass and that works fine when I use that addon directly within the application.

If I however create a new addon and npm-link to the base addon, adding it to the devDependencies I lose all the base css/scss that exists in the base.

Reading through all the documentation that I can find that seems at all relevant it talks about importing for bower dependencies, and seems to indicate that for npm it handles imports on its own, but I can’t seem to get this to work.

I’m using ember-cli 1.13.1 which does change a few things, but I can’t seem to crack the right combination to get this to work.

Can anyone give me any sort of direction, or reference for where I should look in to this?

Thanks in advance.


#2

Could it have something to do with the order that the css/scss files are being transpiled and combined?


#3

I have been able to handle this in a way that I think is acceptable (at least for my situation).

What I was hoping to do was has both the child addon and parent addon compiled css added to vendor.css without me doing anything, which is proving elusive.

What I have done instead is add an import in to the parent addon (@import “…/…/node_modules/child-addon/addon/styles/addon”;).

Then having the ember-cli-sass included in the parent addon and everything is now functioning exactly as I wanted.

There might be a better way, but this gives me what I need. Unless something has a better way they can share.


#4

Me too facing similar issue. For now following @ajgordo’s solution. But sort of feels like an hack