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 小程序预设项目的目录结构、启动文件和配置文件的详细介绍。希望这份教程能帮助你更好地理解和使用该项目。