Use Material Design Components with ember-cli-sass

Question

I'm trying to use Material Components Web(MDC-Web) sass functionality with ember-cli-sass. I've installed MDC-Web with Yarn

In my ember-cli-build.js file I've set my sass includePaths as so:

 sassOptions: {
           includePaths: ['node_modules/material-components-web','node_modules/@material']      
    }

and then in my app.scss file attempted to import the full component library like so:

@import "material-components-web";

However I'm getting the error:

Error: Error: File to import not found or unreadable: @material/button/mdc-button.

Why is the SASS compiler not finding it?

Don Omondi Don Omondi · Accepted Answer · 2018-01-04T01:14:46

This issue got me as well the first time I was starting out. I've been using it in my ember app for a few months now and this is what works for me in my app.scss

// Parent MDC Theming example

$mdc-theme-primary: #009688;
$mdc-theme-secondary: #00bcd4;
$mdc-theme-background: #fff;

@import "material-components-web/material-components-web";

// Overrides to follow example

.mdc-grid-tile__secondary{
    background-color: rgba(0, 150, 136, 0.75);
}
.mdc-list-item{
    white-space: unset;
    overflow: visible;
}

And in ember-cli-build

sassOptions: {
  includePaths: [
    'node_modules'
  ]
}

Use Material Design Components with ember-cli-sass

2 Answers