Cannot import Material Design into Ember app


#1

Hi, I was trying to import material.io styles into Ember app as following:

I tried to @import "@material/textfield/mdc-text-field"; in app.scss

But then I got this error: Build Error (PostcssCompiler) in app/styles/app.scss#sass:1:9 File to import not found or unreadable

Has anyone faced the same issue before or I just missed something ? Thanks


#2

My guess is you’re missing the build import step. Since you’re using an npm package that isn’t ember-aware you have to tell ember to import specific things from the package. I may be slightly off base here but off the top of my head I think you’ll want something like this in ember-cli-build.js (assuming you’re using ember-cli-sass, might look slightly different with other css addons):

sassOptions: {
  includePaths: [
    'node_modules/path/to/assets.scss'
  ]
}

#3

Thanks for you response @dknutsen, I have already had that in my ember-cli-builder.js, I will try again to figure out


#4

Do you have ember-cli-sass installed? Just saw your error said something about PostCSS


#5

Thanks for your response @NullVoxPopuli, it seems like I haven’t installed that one. I will try to read this and try again: https://www.npmjs.com/package/ember-cli-sass