原子化样式UnoCSS的安装配置和使用

官方文档地址：UnoCSS 中文文档 - 即时按需的原子级CSS引擎 | Unocss中文文档 | Unocss中文网

github地址：GitHub - unocss/unocss: The instant on-demand atomic CSS engine.

---

安装

使用 pnpm 安装

pnpm add -D unocss

使用 npm 安装

npm install -D unocss

使用 yarn 安装

yarn add -D unocss

配置 vite.config.ts

在项目根目录找到文件 vite.config.ts（或vite.config.js） ，在里面添加注释标识的这两行：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
// 这一行
import Unocss from "unocss/vite";


export default defineConfig({
  // 这一行
  plugins: [vue(), Unocss()],
  server: {
    host: "0.0.0.0",
    port: 8080,
    hmr: true,
    open: true,
  },
  resolve: {
    alias: [
      {
        find: "@",
        replacement: resolve(__dirname, "src"),
      },
    ],
  },
});

如果你是react项目也是类似的：

引入

在根目录找到 main.ts，引入uno.css

import 'uno.css'

安装插件

使用原子化样式

找一个测试页面，在 class（或 className） 里面使用原子化样式，这里添加了一个背景色和字体大小

const BookList= () => {
  return (
    <div className="bg-red-200 text-xl">测试</div>
  );
};

export default BookList;

效果