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.

1 Like
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 GitHub - miguelcobain/ember-paper: The Ember approach to Material Design. 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.

8

Can you share your solution? I am pretty much stuck at the same problem and does not have an answer yet.

Thanks.

9

Could you share your exact problem and why the treeForStyles() hook is not working for you? ember-paper and ember-bootstrap using them without any issue - to just name a some highly used addons providing SASS.

10

I was referring to the mentioned massive impact on build and rebuild performance. Please let me elaborate my situation where I do not find an adequate (concerning the performance) solution for:

I have a regular Ember app (not an addon) and use SASS (ember-cli-sass). I want to incorporate the Google material design framework and have followed the instruction and included node_modules within the includePaths.

Everything is working. Except that the rebuild performance when running ember s of about 30 seconds is simply not acceptable.

I have tried to only include node_modules/@materialwhich really is what I want, but that leads to SASS compile errors since the different @material packages import other packages with @import '@material/.../mdc-...'.

So far I have not found a way to reduce my rebuild times and at the same time get @material to work. Waiting about 30 scondes whenever I make changes to javascript- or handlebar files is unfeasible.

11

I realize this is an old post, but I ran into this recently in my project while incorporating material-components-web into my ui add-on.

I’m not sure if this a perfect long-term solution, but it doesn’t seem to slow down my build, and allows me to import the scss files in my add-on like @import "@material/button/mdc-button";:

Note – I am using ember-cli-sass and node-sass.

  treeForStyles() {
    let addonStyles = this._super(...arguments);

    // Get all scss files from all sub-packages of material design dependencies
    let materialStyles = new Funnel(this.getMaterialStylesPath(), {
      destDir: '/@material',
      include: ['**/*.scss']
    });

    let tree = mergeTrees([addonStyles, materialStyles]);

    return tree;
  },

  getMaterialStylesPath() {
    return `${this.app.project.root}/node_modules/@material`;
  }
3 Likes