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/
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": []