旋风 UI - Vite 插件
设置 Vite 插件 塔马吉 和气旋UI
vite 应用程序中的组件。 包起来
@tamagui/vite-plugin 与旋风相伴
UI默认.
快速特性
- 别名
react-native改为react-native-web并决心.web.*首先的文件 - 预捆绑和拆卸共享回放背景的 Tamagui 包
- 运行 Tamagui 优化编译器, 并使用来自 Circle UI 配置
@cyclone-ui/tokens,或用你自己的设计符号建造的 - 定义
process.env.TAMAGUI_TARGET,该“旋风”组件读取 只使用网络样式
安装
使用 小时数字 :
pnpm add -D @cyclone-ui/vite
pnpm add @cyclone-ui/state @cyclone-ui/tokens @tamagui/core jotai react-native-web
插件只是无害环境管理,所以项目 package.json 需求
"type": "module" (或 a 个) vite.config.mts 存档).
使用量
将插件添加到 vite.config.ts数字 :
import { cycloneUI } from "@cyclone-ui/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [react(), cycloneUI()]
});
然后将应用包入"旋风"主题提供者:
import { ThemeProvider } from "@cyclone-ui/state/theme";
import { config } from "@cyclone-ui/tokens/tamagui";
createRoot(document.getElementById("root")!).render(
<ThemeProvider config={config} disableInjectCSS={false}>
<App />
</ThemeProvider>
);
选项
cycloneUI() 接受每个
@tamagui/vite-plugin 选项编辑
默认为:
| 选项 | 默认 |
|---|---|
config | "@cyclone-ui/tokens/tamagui" |
components | ["@tamagui/core"] |
过 disableExtraction: true 以保留运行时的样式(例如,在运行时)
调试). A 类 tamagui.build.ts 工程根中的文件覆盖这些
选项.
自定义设计符号
过 tokens 以您自己的设计符号构建 Tamagui 配置
气旋UI默认值。 使用 DTCG 令牌对象,或令牌文件路径或
相对于 Vite 根的阴影 :
export default defineConfig({
plugins: [react(), cycloneUI({ tokens: "tokens/**/*.json" })]
});
有主题名的文件( E)light.tokens.json, (中文(简体) ), dark.tokens.json变成
页:1 light 财务报告和审定财务报表 dark 主题。 符号通过相同的预处理器和
生成器为 @cyclone-ui/tokens,则a razorwind.config.ts 在项目中
仍然适用(例如其字体).
配置是写给 .cyclone-ui/tamagui.config.ts (编) .cyclone-ui
改为 .gitignore当 Vite 开始并替换时 @cyclone-ui/tokens/tamagui
用于编译器和每个导入,所以 ThemeProvider 以上设置
同样的。 更改符后重新启动 Vite .
发展
pnpm nx run vite:build