如何在 Sapper 项目中为 Svelte Material UI (SMUI) 组件使用自定义 theme/colors？

How to use custom theme/colors for Svelte Material UI (SMUI) components in Sapper project?

我已经关注 the instructions 在 Sapper 项目中使用 Svelte Material UI (SMUI)。

如果我将 src/theme/_smui-theme.scss 留空，我可以使用默认 theme/colors 导入和使用 SMUI 组件。当我在此文件中包含 SMUI 建议的以下代码以使用自定义颜色时，它告诉我 Can't find stylesheet to import.

@use "@material/theme" with (
    $primary: #5466F9,
    $secondary: #14a564,
    $surface: #fff,
    $background: #fff
);

我可以确认 @material/theme 目录确实存在于 node_modules 中。谁能帮我理解为什么会导致这样的错误？谢谢！

这似乎与 GitHub 问题跟踪器上的 this one 问题相同：

解决方法应该是删除node_modules和package-lock.json并重新安装。

rm -r node_modules
rm package-lock.json
npm install

Svelte Material UI 最近更新了（改进了性能！），最新的 install instructions 适用于 Sapper。如果您正在处理 Sapper 应用程序中的类似错误，我建议您执行以下步骤：

  1. 卸载 rollup-plugin-postcss 和 sass
  2. 卸载 v2 SMUI 组件，例如npm uninstall @smui/textfield
  3. 安装 v3 SMUI 组件，例如npm install --save-dev @smui/textfield
  4. 按照上述 sapper 的安装说明进行操作

这为我修复了它，允许我在 src/theme/_smui-theme.scss

中提供自定义主题

对于非 sapper 项目 this may work。这是对 sapper 的上述修复之外的灵感。感谢 SMUI 的创建者 Hunter 帮助解决了这个问题并提供了一个很棒的库！