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

Posted 2021-05-06

我正在尝试使用带有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";

但是我收到错误：

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

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

答案

这个问题在我第一次出发时也得到了我。我已经在我的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'
  ]
}

另一答案

在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的情况下，这根本不是必需的。相反，你可以简单地使用包含ember-material-components-web 的ember addon material-components-web。