将 MDC SASS 文件添加到 angular 4 项目

Question

如何将 MDC 组件 sass 文件导入到我的 angular 4 项目中？编译器无法编译 .scss 文件，因为它们的 @import 语句不是相对的 - 它们只是指向 @material。例如，这里是 mdc-button.scss @import 语句：

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

这会使编译器失败，因为它找不到 @material，因为文件在 node_modules/@material/button/mdc-button.scss 中，所以它实际上需要 @import "../animation/variables" 等。

图书馆位于 https://github.com/material-components/material-components-web/

Answer 1

根据您的 sass 工具，（我正在使用 Koala）您必须将额外的路径信息添加到您的 sass 配置中：

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

将 MDC SASS 文件添加到 angular 4 项目

Adding MDC SASS files to angular 4 project

angular

sass

material-components