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

Posted 2023-02-22

【中文标题】使用 mdc 高程时如何添加白框阴影？

【英文标题】：How to add white box shadow when using mdc elevation?

【发布时间】：2022-01-15 21:16:18

【问题描述】：

我只使用材料设计的立面部分（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 ...），一切都会正常工作。

可能出了什么问题？

【参考方案1】：

如果你想使用 mdc-elevation 混合，你需要使用另一个 SCSS：@use "@material/elevation"。

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