0

How can I import the MDC component sass files into my angular 4 project? The compiler fails to compile the .scss files because their @import statements aren't relative - they just point to @material. For example, here is the mdc-button.scss @import statements:

@import "@material/animation/variables";
@import "@material/animation/functions";
@import "@material/elevation/mixins";
@import "@material/ripple/mixins";
@import "@material/theme/mixins";
@import "@material/typography/mixins";

This makes the compiler fail because it cannot find @material because the file is in node_modules/@material/button/mdc-button.scss so it needs to actually @import "../animation/variables" etc..

The library is at https://github.com/material-components/material-components-web/

A. Appleby
  • 469
  • 1
  • 10
  • 23

1 Answers1

1

Depending on your sass tool, (I am using Koala) you have to add the additional path information into your sass config:

// Sass project settings, you can edit it and set custom settings.
// An array of filesystem paths or importers which should be searched for     
//Sass templates imported with the @import directive. (I am on windows it might be 
//different for other O/S)

"includePaths": ["C:\\Users\\loggedInUser\\node_modules"],
    "requireLibs": []
Haggis777
  • 46
  • 4