Question

我试图将材料组件Web（MDC-Web）sass功能与ember-cli-sass一起使用。我已经用Yarn安装了MDC-Web

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

@import "material-components-web";

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

DoSomething

但是我收到了错误：

错误：错误：导入的文件未找到或不可读： @材料/按钮/ MDC-按钮。

为什么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'
  ]
}

Answer 2

在ember中，你必须在ember-cli.build.js中导入不是ember插件的依赖项。见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的ember插件ember-material-components-web 即可。

将材质设计组件与ember-cli-sass一起使用

2 个答案: