使用带有余烬的材料设计部件

Question

我试图使用材料组件Web(MDC-Web) sass功能与成员-cli-sass。我用Yarn安装了MDC-Web

在我的成员-cli-build.js文件中，我将我的sass includePaths设置为：

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

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

@import "material-components-web";

但是，我得到了错误：

错误:错误:文件导入未找到或不可读：@material/button/mdc-按钮。

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

Answer 1

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

在余烬-cli-构建中

sassOptions: {
  includePaths: [
    'node_modules'
  ]
}

Answer 2

在ember-cli.build.js中，您必须导入依赖项，而这些依赖项不是成员加载项。见https://guides.emberjs.com/v2.18.0/addons-and-dependencies/managing-dependencies。从2.15开始，也可以从node_modules (https://discuss.emberjs.com/t/import-javascripts-from-node-modules-packages/13606)导入。

但是对于material-components-web来说，这根本不应该是必要的。相反，您可以简单地使用余烬材料.零件.腹板，其中包括material-components-web为您。