UnoCSS
编辑此页面UnoCSS 是一个按需使用 CSS 工具库,作为 Vite 插件与 Solid 无缝集成。
安装 Vite 插件
导入 Vite 插件
安装后,打开 vite.config.js
或 vite.config.ts
。默认的 Solid Vite 配置如下所示:
import { defineConfig } from "vite";import solidPlugin from "vite-plugin-solid";
export default defineConfig({ plugins: [solidPlugin()], server: { port: 3000, }, build: { target: "esnext", },});
现在,从“unocss/vite”导入 unocssPlugin
并将其添加到插件数组中:
import { defineConfig } from "vite";import unocssPlugin from "unocss/vite";import solidPlugin from "vite-plugin-solid";
export default defineConfig({ plugins: [unocssPlugin(), solidPlugin()], server: { port: 3000, }, build: { target: "esnext", },});
确保 unocssPlugin
排在 solidPlugin
之前,以防止出现某些边缘 case。
导入 UnoCSS
在根 index.jsx
或 index.tsx
文件中,导入 UnoCSS:
/* @refresh reload */import "uno.css"import { render } from "solid-js/web"import "./index.css"import App from "./App"
render(() => <App />, document.getElementById('root') as HTMLElement);
或者,您可以使用别名 import "virtual:uno.css"
:
/* @refresh reload */import "virtual:uno.css"import { render } from "solid-js/web"import "./index.css"import App from "./App"
render(() => <App />, document.getElementById('root') as HTMLElement);
支持
如需其他帮助,请参阅 UnoCSS/Vite 集成指南 。