How can I share files (CSS/Sass) between addons?

Ember CLI
1

I’m trying to figure out how to make a Sass file from my addon available so that other addons can @import it.

  • If I put it under addon/styles/addon.scss, it gets auto-concat’ed into vendor.js
  • If I put it under app/styles/my-addon-name.scss, then the host app can explicitly @import it. (But I’m trying to get an intermediate addon to be able to @import it.)
  • I’ve tried putting a test file under addon/styles/foo.scss and configuring a second addon’s importPaths to point to that location, to no avail.

I’m trying to understand at a higher level the flow/architecture that these style trees. I think that would help me narrow down the config I need.

So to start, let’s say Addon B depends on Addon A. What hook/tree should Addon B look for *.scss files in Addon A’s addon/styles folder?

2 Likes
2

There is another dimension to your question, because when you say you want the intermediate addon to import it, you’re not saying whether that addon is using addon/styles/addon.scss or app/styles/its-name.scss. They’re different.

If the intermediate addon uses app/styles, I think the import will work. Because both files end up together inside the app’s styles tree. But that also commits the intermediate addon to being something that is explicitly imported into the app, not automatically concatenated to the build.

(I agree that this whole area is unsatisfactory, I am working on a rationalized system that would cover CSS as well as JS.)

1 Like
3

That makes sense. The goal is for intermediate Addon to be automatically concat’d.

Any ideas for a solution there? I feel like if I dig deep enough I should be able to add the first Addon as an importable path

5

@samselikoff did you find an acceptable solution to this issue? If so, would you mind sharing it?

6

yeah I have been having the exact same issue and and I couldn’t find a solution. We have an addon which sets up our colours to be consumed by apps and other addons. It works great with apps but addons fail to include the colours styles. It would be amazing if there is a way of doing this somehow. @samselikoff did you find anything which would help us ?

1 Like
7

I don’t remember at this point. Sorry!

I might have been working on AddonDocs so that repo might be worth a look.

8

I’m also interested in the answer to this question, due to the same scenario as @teejay. Any success?

9

Again I can’t recall the specific project I was working on.

Have you tried trying to get the consuming app/addon to app.import it? Might work if it’s plain CSS.

Otherwise if it’s Sass you might need to configure the host app/addon’s Sass includePaths to include your addon’s location in node_modules.

10

A bit hacky, but this works:

// ember-cli-build.js
sassOptions: {
  includePaths: ['node_modules/@my-scope/ember-colours/addon/styles']
}
11

Ah, posted at the same time, thanks!

1 Like