Styling your Components

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 集成指南。

报告此页面问题