如何单独导入所有 MDC 包而不是作为 material-components-web 导入？答案

【问题标题】：How do I import all MDC packages individually rather than as material-components-web?如何单独导入所有 MDC 包而不是作为 material-components-web 导入？
【发布时间】：2021-11-29 02:26:00
【问题描述】：

我处于优化阶段，到目前为止，我一直在导入material-components-web。现在，我想将整个库作为单独的包导入，以便我可以注释掉我不使用的模块。因此，我阅读了文档并为每个包添加了 JavaScript 导入和初始化以及 SASS @uses 和 @includes，并重命名了重复的 style 命名空间并注释掉了重复的 @use 引用。但是，我正在与一个未定义的 mixin 作斗争。

Error
Undefined mixin.
   ╷
77 │ @include icon-button.core-styles; // Undefined mixin
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  stdin 77:1  root stylesheet

Here is a codesandbox 仅包含 JS 导入和 SCSS @use 和 @include 声明问题。

【问题讨论】：

标签： sass mdc material-components-web

【解决方案1】：

您需要将@use '@material/icon-button' 替换为@use '@material/icon-button/icon-button'。您还需要添加包@material/icon-button。当前包结构在包集中不一致。我猜 MDC 团队正在试验它的结构。

同时删除@use '@material/icon-button/mdc-icon-button';。这些 /mdc-.scss 或 /styles.scss 文件只是为了方便您想立即包含 CSS 而不需要额外的 @987654325 @调用。

【讨论】：