使用 Material 设计组件和 ember-cli-sass

Question

我正在尝试通过 ember-cli-sass 使用 Material Components Web(MDC-Web) sass 功能。我用 Yarn 安装了 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 中，您必须在 ember-cli.build.js 中导入非 ember 插件的依赖项。参见 https://guides.emberjs.com/v2.18.0/addons-and-dependencies/managing-dependencies. Since 2.15 it is also possible to import from node_modules (https://discuss.emberjs.com/t/import-javascripts-from-node-modules-packages/13606)。

但在 material-components-web 的情况下，这根本没有必要。相反，您可以简单地使用 ember 插件 ember-material-components-web 其中包括 material-components-web 给你。

Answer 2

这个问题也是我第一次开始时遇到的问题。我已经在我的 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'
  ]
}

使用 Material 设计组件和 ember-cli-sass

Use Material Design Components with ember-cli-sass

ember.js

sass

material-components-web