CODEWITHSUNDEEP
ember.jssassmaterial-components-web
Chris Nevill
Chris Nevill

Reputation: 6151

Use Material Design Components with ember-cli-sass

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?

Upvotes: 2

Views: 662

Answers (2)

Don Omondi
Don Omondi

Reputation: 946

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'
  ]
}

Upvotes: 2

Eduard Baitinger
Eduard Baitinger

Reputation: 91

In ember you have to import dependencies, that are not ember addons, in ember-cli.build.js. See https://guides.emberjs.com/v2.18.0/addons-and-dependencies/managing-dependencies. Since 2.15 it is also possible to import from node_modules (https://discuss.emberjs.com/t/import-javascripts-from-node-modules-packages/13606).

But in case of material-components-web this shouldn't be necessary at all. Instead you can simply use the ember addon ember-material-components-web that includes material-components-web for you.

Upvotes: 0

Related Questions