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

**URL:** <https://discuss.emberjs.com/t/how-can-i-share-files-css-sass-between-addons/15429>\
**Category:** Ember CLI\
**Created:** [September 7, 2018, 7:15pm UTC](https://discuss.emberjs.com/t/how-can-i-share-files-css-sass-between-addons/15429 "2018-09-07T19:15:54Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![samselikoff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/samselikoff/32/16581_2.png) [@samselikoff](https://discuss.emberjs.com/u/samselikoff)\
**Post date:** [September 7, 2018, 7:15pm UTC](https://discuss.emberjs.com/t/how-can-i-share-files-css-sass-between-addons/15429/1 "2018-09-07T19:15:54Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [September 7, 2018, 10:32pm UTC](https://discuss.emberjs.com/t/how-can-i-share-files-css-sass-between-addons/15429/2 "2018-09-07T22:32:20Z")

</div>

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.)

---

<div class="post-metadata">

**Author:** ![samselikoff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/samselikoff/32/16581_2.png) [@samselikoff](https://discuss.emberjs.com/u/samselikoff)\
**Post date:** [September 8, 2018, 12:44am UTC](https://discuss.emberjs.com/t/how-can-i-share-files-css-sass-between-addons/15429/3 "2018-09-08T00:44:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jnkroeker](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jnkroeker/32/16481_2.png) [@jnkroeker](https://discuss.emberjs.com/u/jnkroeker)\
**Post date:** [May 17, 2019, 3:01pm UTC](https://discuss.emberjs.com/t/how-can-i-share-files-css-sass-between-addons/15429/5 "2019-05-17T15:01:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![teejay](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/teejay/32/13585_2.png) [@teejay](https://discuss.emberjs.com/u/teejay)\
**Post date:** [May 28, 2019, 11:34pm UTC](https://discuss.emberjs.com/t/how-can-i-share-files-css-sass-between-addons/15429/6 "2019-05-28T23:34:53Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![samselikoff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/samselikoff/32/16581_2.png) [@samselikoff](https://discuss.emberjs.com/u/samselikoff)\
**Post date:** [May 31, 2019, 11:15am UTC](https://discuss.emberjs.com/t/how-can-i-share-files-css-sass-between-addons/15429/7 "2019-05-31T11:15:30Z")

</div>

I don’t remember at this point. Sorry!

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

---

<div class="post-metadata">

**Author:** ![amk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/amk/32/9116_2.png) [@amk](https://discuss.emberjs.com/u/amk)\
**Post date:** [October 28, 2019, 2:36pm UTC](https://discuss.emberjs.com/t/how-can-i-share-files-css-sass-between-addons/15429/8 "2019-10-28T14:36:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![samselikoff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/samselikoff/32/16581_2.png) [@samselikoff](https://discuss.emberjs.com/u/samselikoff)\
**Post date:** [October 28, 2019, 2:56pm UTC](https://discuss.emberjs.com/t/how-can-i-share-files-css-sass-between-addons/15429/9 "2019-10-28T14:56:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![amk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/amk/32/9116_2.png) [@amk](https://discuss.emberjs.com/u/amk)\
**Post date:** [October 28, 2019, 2:56pm UTC](https://discuss.emberjs.com/t/how-can-i-share-files-css-sass-between-addons/15429/10 "2019-10-28T14:56:34Z")

</div>

A bit hacky, but this works:

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

```

---

<div class="post-metadata">

**Author:** ![amk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/amk/32/9116_2.png) [@amk](https://discuss.emberjs.com/u/amk)\
**Post date:** [October 28, 2019, 2:56pm UTC](https://discuss.emberjs.com/t/how-can-i-share-files-css-sass-between-addons/15429/11 "2019-10-28T14:56:52Z")

</div>

Ah, posted at the same time, thanks!
