Import scss from node_modules into app.scss

Ember CLI
1

Hello,

I’m attempting to upgrade to Ember-CLI 3.5.0 and some previously working import statements in my app.scss are now causing a build error “File to import not found or unreadable…”

@import '../../node_modules/spinkit/scss/spinners/3-wave';
@import '../../node_modules/spinkit/scss/spinners/7-three-bounce';

I have tried:

@import 'spinkit/scss/spinners/3-wave';
@import 'spinkit/scss/spinners/7-three-bounce';

But no luck.

I do have ember-cli-sass installed but I’m unsure if I’m simply missing a proper bit of configuration. So far I’ve tried adding the following to my ember-cli-build.js but I still get the same build errors.

sassOptions: {
  includePaths: [
    'node_modules/spinkit/scss'
  ]
},

Any guidance is greatly appreciated :slight_smile:

Cheers

2

Okay figured out how to get it working.

If I configure my build like so:

sassOptions: {
  includePaths: [
    'node_modules/spinkit/scss'
  ]
}

Then I can do:

@import 'spinners/3-wave';
@import 'spinners/7-three-bounce';

Sill unsure of what changed during Ember-CLI upgrade but hopefully this helps others.

2 Likes
3

You may have accidentally been relying on the fact that tmp was inside the project directory, such that files in tmp were capable of resolving things in node_modules.

ember-cli 3.5 moves tmp to the system temp location, which has a lot of nice benefits, but means this kind of accidentally node_modules resolution no longer works.

1 Like
4

That makes sense. Thanks for clarifying for me :slight_smile: