ember.js - 将 Material 设计组件与ember-cli-sass一起使用

Question

我正在尝试将 Material 组件Web(MDC-Web)sass功能与ember-cli-sass一起使用。
我已经用纱安装了MDC-Web

在我的ember-cli-build.js文件中，我将sass includePaths设置为:

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

然后在我的app.scss文件中尝试导入整个组件库，如下所示:

@import "material-components-web";

但是我得到了错误:

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

为什么SASS编译器找不到它？

Answer 1

第一次开始我也遇到了这个问题。我已经在ember app中使用了几个月了，这就是我的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;
}

并在ember-cli-build中

sassOptions: {
  includePaths: [
    'node_modules'
  ]
}