使用mdc elevation时如何添加白框阴影？

Question

我只使用 material 设计的提升部分 (mdc-elevation)，只是想添加一些实用程序 类。在我的 scss 文件中，我有这个：

@use "@material/elevation/mdc-elevation";

@for $z-value from 0 through 24 {
    .mdc-elevation-white--z#{$z-value} {
        @include mdc-elevation.elevation($z-value, white);
    }
}

但是我的编译器抱怨：

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: There is no module with the namespace "elevation-theme".

我不知道我做的是否正确，因为文档没有很多示例，进入源代码就像进入一个很深的抽象兔子洞。

我正在使用 sass，而不是 node-sass，因此模块应该可以正常工作。如果我删除 for 循环（并保留 @use ...），一切都会正常工作。

有什么问题吗？

Answer 1

如果你想使用 mdc-elevation mixins 你需要使用另一个 SCSS: @use "@material/elevation".

您使用的 @use "@material/elevation/mdc-elevation"; 没有向当前上下文添加 mixins，它只是渲染包 CSS。