# Cannot import Material Design into Ember app

**URL:** <https://discuss.emberjs.com/t/cannot-import-material-design-into-ember-app/16152>\
**Category:** Build Issues\
**Created:** [February 11, 2019, 8:58am UTC](https://discuss.emberjs.com/t/cannot-import-material-design-into-ember-app/16152 "2019-02-11T08:58:22Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![EUGinsane](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/euginsane/32/16224_2.png) [@EUGinsane](https://discuss.emberjs.com/u/EUGinsane)\
**Post date:** [February 11, 2019, 8:58am UTC](https://discuss.emberjs.com/t/cannot-import-material-design-into-ember-app/16152/1 "2019-02-11T08:58:22Z")

</div>

Hi, I was trying to import [material.io](https://material.io) styles into Ember app as following:

 ![image](https://us1.discourse-cdn.com/flex019/uploads/emberjs_public/original/3X/1/b/1b9a2ee4afc5e49d716d7690f42f1af3d203545c.png)

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

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [February 11, 2019, 3:28pm UTC](https://discuss.emberjs.com/t/cannot-import-material-design-into-ember-app/16152/2 "2019-02-11T15:28:08Z")

</div>

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):

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

```

---

<div class="post-metadata">

**Author:** ![EUGinsane](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/euginsane/32/16224_2.png) [@EUGinsane](https://discuss.emberjs.com/u/EUGinsane)\
**Post date:** [February 12, 2019, 4:33am UTC](https://discuss.emberjs.com/t/cannot-import-material-design-into-ember-app/16152/3 "2019-02-12T04:33:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![NullVoxPopuli](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullvoxpopuli/32/18691_2.png) [@NullVoxPopuli](https://discuss.emberjs.com/u/NullVoxPopuli)\
**Post date:** [February 12, 2019, 10:34am UTC](https://discuss.emberjs.com/t/cannot-import-material-design-into-ember-app/16152/4 "2019-02-12T10:34:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![EUGinsane](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/euginsane/32/16224_2.png) [@EUGinsane](https://discuss.emberjs.com/u/EUGinsane)\
**Post date:** [February 13, 2019, 3:24am UTC](https://discuss.emberjs.com/t/cannot-import-material-design-into-ember-app/16152/5 "2019-02-13T03:24:35Z")

</div>

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