一個 @nanarino/stylus 主題的 vue3 元件合集
pnpm i
pnpm dev爲了可以源碼引入，不要使用路徑別名如 @
爲了可以離線訪問，不要用網路元件如 <iconify-icon />
先決條件是引入 @nanarino/stylus，以 astro 為例
pnpm i @nanarino/stylus---
import stylus from "@nanarino/stylus?url"
---
<html lang="en-HK">
<head>
<link rel="stylesheet" href={stylus} />
</head>
<body>
<slot />
</body>
</html>若使用 css in js 方式引入，有些打包器（如 vite）在構建后纔會將其置於 <head /> 中，開發環境出現 FOUC 問題是正常的
// css in js
import "@nanarino/stylus"但是初始化明暗的脚本不應該使用 import 引入
<html lang="en-HK">
<head>
<script is:inline>
document.documentElement.dataset["theme"] =
localStorage.getItem("theme") ??
["dark", "light"][
+!window.matchMedia?.("(prefers-color-scheme: dark)")?.matches
]
</script>
</head>
<body>
<slot />
</body>
</html>元件暫時未計劃發佈到 npm, 可以按以下方式安裝, 或者直接拷貝到自己的專案
// package.json
{
"dependencies": {
+ "@nanarino/vue": "github:nanarino/vue",
},
"pnpm": {
"overrides": {
+ "@nanarino/stylus": "$@nanarino/stylus",
}
}
}pnpm update @nanarino/vue直接從源程式碼引入
<script setup lang="ts">
import Button from "@nanarino/vue/src/lib/Button"
</script>
<template>
<Button> HOLA </Button>
</template>