如何使用 mixins 设置 mdc-icon-button 的密度？答案

【问题标题】：How do you set the density for mdc-icon-button using mixins?如何使用 mixins 设置 mdc-icon-button 的密度？
【发布时间】：2020-02-24 22:15:39
【问题描述】：

我对使用 sass 还是很陌生，我在为 Material.io's icon buttons. 使用 mixin 时遇到了一些麻烦
我链接的页面描述了使用density($density-scale) mixin，但我似乎无法弄清楚如何使用它。 Getting Started 指南显示了如何为 mdc-button 使用 mixin 的示例，因此我尝试对 mdc-icon-button 做同样的事情。这是我尝试过的一些事情。

@use "@material/icon-button/mdc-icon-button";
@use "@material/icon-button";
// ^ The line above results in this error: SassError: Can't find stylesheet to import.

对于实际的元素，由于这个导入不起作用，我尝试了以下。

.mdc-icon-button {
    @include icon-button.density(-1);
    // ^ SassError: There is no module with the namespace "icon-button".
    @include mdc-icon-button.density(-1);
    @include mdc-icon-button-density(-1);
    @include density(-1);
    // ^ All of these lines cause the following error: SassError: Undefined mixin.
}

我只是不确定现在该怎么做。我如何为这个组件使用密度 mixin？

【问题讨论】：

标签： sass material-components-web

【解决方案1】：

这实际上是sass-loader 的一个错误。在解决其他问题时，您可以查看here 以获取临时解决方法。使用该解决方法会导致导入不再失败，并且组件的文档仍然准确。

【讨论】：