SvelteKit 安装

您需要单独安装您使用的包以及主题包。

注意：安装新包后，您需要重建主题并重新启动 SvelteKit。

npm install --save-dev @smui/button
npm install --save-dev @smui/card
# etc...

npm install --save-dev smui-theme

使用 smui-theme 创建您的主题文件。

npx smui-theme template src/theme

您可以在 src/theme 和 src/theme/dark 中的现有文件中修改您的主题变量。您也可以添加Material 排版样式。

主题构建脚本

您需要在 package.json 文件中使用以下其中一组准备脚本。

支持深色模式。

"prepare": "npm run smui-theme-light && npm run smui-theme-dark",
"smui-theme-light": "smui-theme compile static/smui.css -i src/theme",
"smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark"

或者，不支持深色模式。

"prepare": "npm run smui-theme",
"smui-theme": "smui-theme compile static/smui.css -i src/theme"

样式表

现在，在 src/app.html 文件中，将以下内容添加到 head 部分

支持深色模式。

<!-- SMUI Styles -->
<link rel="stylesheet" href="/smui.css" media="(prefers-color-scheme: light)" />
<link
  rel="stylesheet"
  href="/smui-dark.css"
  media="screen and (prefers-color-scheme: dark)"
/>

或者，不支持深色模式。

<!-- SMUI Styles -->
<link rel="stylesheet" href="/smui.css" />

字体

Material 使用 Roboto 字体，因此请确保包含这些样式表（或从包中包含它们）。

<!-- Hint where we get fonts from. -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- Roboto, and Roboto Mono fonts -->
<link
  href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
  rel="stylesheet"
/>

图标

获取 Material 图标的最简单方法是使用字体。如果您想使用 Material Icons 字体，请将其包含在内，也位于 head 部分。

<!-- Material Icons fonts -->
<link
  href="https://fonts.googleapis.com/css2?family=Material+Icons&display=swap"
  rel="stylesheet"
/>

但是，您可以通过使用MDI 库 来获得更广泛的图标库并减小网络传输量。

npm install --save-dev @mdi/js

您可以在“使用 SVG”演示中看到如何在图标按钮演示页面 上使用这些图标。

收尾工作

之后，运行 npm run prepare 来构建您的 CSS 文件，然后您可以运行 npm run dev 来开始开发。祝您编码愉快！

添加更多 SMUI 包

每当您添加新的 SMUI 包时，请再次运行 npm run prepare 以使用包含的新组件样式重新构建您的 CSS 文件。