How to include nested addon/package sass in addon/styles/addon.scss for use in engine addon.scss

[williamhector]

This is a complicated question that I've spent over a day and a half trying to figure out, and I have very little understanding of the way ember cli and broccoli work in the index.js file of an addon.

I have a project that includes a "core" in-repo-addon, and some in-repo-engines that consume their sibling core addon. In the core addon, I'm using a nested addon (ember-sass-bootstrap), and am trying to provide access to the nested addon's sass variables and mixins to the engines in the engines' addon/styles/addon.scss file instead of app/styles/app.scss, so that I can lazy load the engines' styles only when required. Putting the styles in app/styles/app.scss would require them to be imported into the parent app's app.scss, which I'm hoping to avoid.

I've learnt how to be able to import the core addon's addon/styles/addon.scss in my engines' addon/styles/addon.scss files and got that part working, but I can't figure out how to be able to import the sass files from core's nested addon into core's addon/styles/addon.scss file.

In core's index.js file, I've tried things like sassOptions-includePaths, treeForStyles, treeForParentAddonStyles, mergeTrees inside the "included" hook, etc. I don't understand much of it, and am hoping someone can help me out.

[alechirsch]

+1

[stefanpenner]

@williamhector might be handy for you to provide an example app that you expect to work, describe the expected output. Then someone can work back, and ensure that it:

• is possible
• if something is broken
• docs, etc

[williamhector]

I tried to make an example project, but this is too long ago to remember the setup, and unfortunately I didn't keep any commits of my experiments, so I couldn't get the part that I previously said I could get working, to work.

I was kind of flailing around trying lots of things, so I didn't have any expectations that anything would work, just hoping it would.

I was hoping one of you guys with way more know-how than me could tell me if it was possible or not.

The goal is to have:

• an in-repo-addon with a nested addon that provides sass files, and
• multiple in-repo-engines that have sass files which are able to import the nested addon's sass files (via the parent in-repo-addon)

For the purpose of sharing 3rd-party (bootstrap) sass variables among multiple engines while keeping the engines' styles lazy loaded.

I settled for adding bootstrap to the root app, and in the root app's app.scss file, I am first importing the bootstrap sass files, then importing each of my engines app/styles/app.scss files, as opposed to dealing with addon/styles/addon.scss This outcome means I'm not lazy loading the engines' styles as desired.

Note that while attempting to set up this example project, I noticed that a few days after I posted this issue, there was an update to the readme ( https://github.com/aexmachina/ember-cli-sass/commit/aee458a774d7d2fb505de0daf00d18b9784b0501#diff-04c6e90faac2675aa89e2176d2eec7d8 ) which may or may not have helped.

[Bajena]

+1

[jamesarosen]

#182 may be the same issue, with the parent addon as an in-repo addon.