UnoCSS 教程：安装与使用指南

UnoCSS 教程：安装与使用指南

unocssThe instant on-demand atomic CSS engine.项目地址:https://gitcode.com/gh_mirrors/un/unocss

1. 项目目录结构及介绍

UnoCSS 的源码目录通常包含以下关键部分：

.
├── dist                # 编译后的库文件
│   ├── runtime.js      # 运行时库
│   └── ...
├── src                  # 源代码
│   ├── generator.ts    # 样式生成器
│   ├── transformer.ts  # 配置转换器
│   └── ...              # 其他源文件
├── package.json        # 项目元数据和依赖
├── README.md           # 项目说明
└── ...                  # 其他辅助文件（如测试、示例等）

• dist 存放编译后的库文件，可以用于实际项目中。
• src 包含核心代码，如样式生成逻辑。
• package.json 管理项目依赖和脚本。

2. 项目的启动文件介绍

在 UnoCSS 中，主要的入口点可能是 src/generator.ts 或者 src/transformer.ts 文件，它们负责处理配置和生成 CSS 样式。如果你想要运行或测试项目，通常会使用到 npm run 脚本，例如:

# 安装依赖
npm install

# 开发模式运行
npm run dev

# 构建生产环境版本
npm run build

请查阅项目中的 scripts 部分的 package.json 文件以获取准确的命令。

3. 项目的配置文件介绍

UnoCSS 可以通过传入配置对象进行定制，这通常是在你的应用中导入 UnoCSS 并初始化时完成的。以下是一个简单的配置示例：

import { createUnocssPlugin } from 'unocss';

const customConfig = {
  presets: [
    // 使用预设，如 tailwindcss 风格
    '@unocss/preset-tailwind',
  ],
  rules: [
    // 自定义规则，例如下面添加一个背景颜色的规则
    { name: 'bg-primary', match: ['*'], props: { backgroundColor: '#ff0000' } }
  ]
};

export default function () {
  return createUnocssPlugin(customConfig);
}

在这个例子中，我们创建了一个 Unocss 插件，它使用了 TailwindCSS 预设，并添加了一个自定义的 bg-primary 规则，该规则将为元素设置红色背景。

要将配置应用于你的项目，你需要在构建工具（如 Vite、Webpack）中引入这个插件，并将其添加到配置中。

请注意，UnoCSS 也支持从 .unorc 或 .unorc.js 文件加载配置，如果你在项目根目录有这些文件，它们会被自动读取。

以上是 UnoCSS 的基本介绍和配置使用方法。深入了解 UnoCSS 的功能，建议查看 官方文档 获取更详细的指导和示例。

unocssThe instant on-demand atomic CSS engine.项目地址:https://gitcode.com/gh_mirrors/un/unocss