UnoCSS 小程序预设使用教程

目录结构及介绍

UnoCSS 小程序预设项目的目录结构如下：

unocss-preset-weapp/
├── assets/
├── examples/
├── src/
├── test/
├── .eslintcache
├── .gitignore
├── LICENSE
├── OLD_README.md
├── README.md
├── build.config.ts
├── colors.d.ts
├── .eslint.config.js
├── package.json
├── pnpm-lock.yaml
├── rules.d.ts
├── theme.d.ts
├── transformer.d.ts
├── tsconfig.json
├── utils.d.ts
├── variants.d.ts
├── vitest.config.ts

主要目录和文件介绍

• assets/: 存放项目资源文件。
• examples/: 存放示例代码。
• src/: 存放源代码。
• test/: 存放测试代码。
• .eslintcache: ESLint 缓存文件。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证。
• OLD_README.md: 旧的 README 文件。
• README.md: 项目说明文档。
• build.config.ts: 构建配置文件。
• colors.d.ts: 颜色定义文件。
• .eslint.config.js: ESLint 配置文件。
• package.json: 项目依赖和脚本配置。
• pnpm-lock.yaml: pnpm 锁定文件。
• rules.d.ts: 规则定义文件。
• theme.d.ts: 主题定义文件。
• transformer.d.ts: 转换器定义文件。
• tsconfig.json: TypeScript 配置文件。
• utils.d.ts: 工具函数定义文件。
• variants.d.ts: 变体定义文件。
• vitest.config.ts: Vitest 配置文件。

项目的启动文件介绍

项目的启动文件主要是 package.json 中的脚本配置。以下是一些关键的启动脚本：

{
  "scripts": {
    "unocss": "unocss pages/**/*.wxml -c unocss.config.js --watch -o unocss.wxss",
    "unocss:build": "unocss pages/**/*.wxml -c unocss.config.js -o unocss.wxss"
  }
}

启动脚本介绍

• unocss: 监听文件内容变化并生成 wxss 文件。
• unocss:build: 构建 wxss 文件。

项目的配置文件介绍

项目的配置文件主要是 unocss.config.js 和 build.config.ts。

unocss.config.js

import { defineConfig } from "unocss";
import presetWeapp from 'unocss-preset-weapp';

const include = [/\.wxml$/];

export default defineConfig({
  content: {
    pipeline: {
      include
    }
  },
  presets: [
    presetWeapp()
  ],
  separators: '__'
});

build.config.ts

import { defineConfig } from "unocss";
import presetWeapp from 'unocss-preset-weapp';

const include = [/\.wxml$/];

export default defineConfig({
  content: {
    pipeline: {
      include
    }
  },
  presets: [
    presetWeapp()
  ],
  separators: '__'
});

配置文件介绍

• unocss.config.js: UnoCSS 配置文件，定义了内容管道、预设和分隔符。
• build.config.ts: 构建配置文件，定义了内容管道、预设和分隔符。

以上是 UnoCSS 小程序预设项目的目录结构、启动文件和配置文件的详细介绍。希望这份教程能帮助你更好地理解和使用该项目。