Ember Addon Sass Compilation


#1

I have an Ember addon which wraps the ‘@material’ google material design framework. I want to be able to import their SASS into my addons SASS and then have the consuming app import my addons SASS.

The framework uses SASS imports of the format @import '@material/...' so in order for the SASS to build correctly you have to configure ember-cli-sass with includePaths: ['node_modules'] which works fine, but has a massive impact on rebuild performance.

I would like to be able to include the SASS files for just this node module without having to watch the whole node_modules folder.

I have tried adding to treeForStyles(tree) hook in my addon, which adds them to the styles tree but when including that path it complains that it doesn’t exist.

Is it possible to do something along those lines?


#2

It sounds like you’re on the right track. Maybe try using broccoli-debug in your treeForStyles to be sure of what’s in there.

Does this mean app.import from ember-cli-build.js, or do you mean a sass @import? I think the sass @import can be made to work, assuming you are placing an @material folder directly inside styles.


#3

I mean including it in ember-cli-sass options

includePaths: ['app/styles'] - where I would now expect there to be a @material folder which the SASS compiler would now be able to recognise imports like @import '@material/theme'

I’ll try the broccoli tool you mentioned though, thanks


#4

I don’t think setting it to app/styles will work. That path is an input to the build, not the output of the build.

What you’re doing is essentially this. Those docs imply to me that sass is already configured to discover imports within the shared app styles tree.


#5

If you go a level deeper to look at the node-sass docs, the includePaths array is the list of places the compiler is able to resolve import statements from. So I would expect to have to include a location which contained my @material folder for the import "@material/example/file" import statement to work.

I have added this to the styles tree from my addon and can see it in that folder during the build but it isn’t available when using it in the includePaths array which only seems to include things directly from the app folder rather than the build tree.


#6

So I would expect to have to include a location which contained my @material folder for the import “@material/example/file” import statement to work.

My point is that I’m pretty sure the defaults are already set in a way that can find things in the build output, because there are definitely other addons that already do what you’re trying to do.

For example, see how https://github.com/miguelcobain/ember-paper/ works. It is making Sass styles importable by apps, and it even gets some of those Sass files out of a third-party package (angular-material-source).


#7

Thanks ef4, it was a slightly different case that wasn’t solvable the way ember-paper had done it.

But i’ve figured it out and replaced ember-cli-sass with my own solution that can build the tree into the correct location.

Thanks for your help with this, much appreciated.