【UnoCSS快速上手】：安装、配置与优化，以及遇到的问题
目录
第一章 前言
第二章 安装及配置
第三章 优化
第四章 遇到的问题并修复
第一章 前言
UnoCSS 是一款即时原子 CSS 引擎以及高性能的原子化 CSS 引擎, 其设计灵活且可扩展。核心是不固定的，所有 CSS 实用程序都是通过预设提供。采用模块化设计，将不同功能拆分为独立包，开发者可根据项目需求灵活组合。其核心思想是将样式拆分为不可再分的最小单元（原子类），通过组合这些原子类构建复杂 UI。
用于需要高效管理复杂样式的大型项目，在动态交互频繁的 Web 应用中、大家平常想偷懒不想写class类名时非常适合。
第二章 安装及配置
- 官方文档
https://www.unocss.cn/guide/
- 中文文档
https://unocss.jiangruyi.com/guide/
- 特点
-
高性能：通过原子化设计减少代码冗余，提升渲染效率。
-
模块化：基础核心包
@unocss/core提供基础生成能力，不包含预设规则，便于自定义。 2 -
灵活性：支持按需加载功能模块，避免引入多余代码。
- 安装
# 安装核心包
npm install -D unocss# 或者使用 yarn
yarn add -D unocss# 或者使用 pnpm
pnpm add -D unocss- 创建uno.config.(js/mjs/)，添加自定义配置项
// uno.config.ts
import { defineConfig } from 'unocss'export default defineConfig({// 在这里添加你的配置
})- 在项目中集成（注意：这里会有一个问题，小编在后面会给大家说明）
// vite.config.mjs
import { defineConfig } from 'vite'
import UnoCSS from 'unocss/vite'export default defineConfig({plugins: [UnoCSS(),],
})- 在main.js中导入（很重要！！！）
// 引入unocss
import 'virtual:uno.css'- UnoCSS 配置主要通过 uno.config.{js,mjs}文件实现，该文件位于项目根目录。以下是核心配置项的说明及示例：（可选，若不配置就是直接用官方的）
//uno.config.jsimport presetRemToPx from '@unocss/preset-rem-to-px'
import { defineConfig,presetAttributify,presetIcons,presetTypography,presetWind3,presetWebFonts,transformerDirectives,transformerVariantGroup
} from 'unocss'
export default defineConfig({presets: [presetWind3(), // 默认预设（Tailwind-like 规则）presetAttributify(), // 支持属性化模式（如 `<div text-red>`）//在原子css的默认预设中，默认单位为rem，且1rem = 4pxpresetRemToPx({baseFontSize: 16, // 1 rem = ? px，默认 16//baseFontSize:4, // 1px 就是 1px}),// 排版工具presetTypography({// 可选：自定义选择器名，默认是 `prose`selectorName: 'prose',// 可选：覆盖/扩展样式cssExtend: {'code': { color: '#8b5cf6' },'a:hover': { color: '#f43f5e' },'a:visited': { color: '#14b8a6' },},}),// 网页字体--使用 bunnyfont 作为字体提供者// presetWebFonts({ // provider: 'bunny', // fonts: {// sans: 'Inter'// }// }), // 支持图标（如 `i-carbon-home`）// presetIcons({//collections: {}, //指定图标库的集合，例如 collections: { streamline: {} } 表示使用streamline 图标库。//prefix: 'i-', //设置图标类名前缀，默认值为 i-（如 i-search[streamline-bracket]）。//scale: 1.2, //调整图标尺寸，例如 scale: 1.2 表示放大1.2倍。//warn: true, //开启/关闭警告提示，例如 warn: true。 //设置样式// extraProperties: {// 'display': 'inline-block',// 'vertical-align': 'middle' // 对齐调整// },// }) ],shortcuts: {// 自定义快捷方式'btn': 'px-4 py-2 rounded-lg bg-blue-500 text-white', //按钮'center': 'flex items-center justify-center', //居中'flex-center': 'flex items-center justify-center',//垂直水平居中'flex-end': 'flex items-center justify-end',//垂直居中 右对齐'flex-start': 'flex items-center justify-start',//垂直居中 左对齐'flex-between': 'flex items-center justify-between',//垂直居中 左右对齐'flex-middle': 'flex items-center',//垂直居中'flex-col-center': 'flex flex-col items-center justify-center',//竖着居中 },rules: [// 自定义原子规则[/^m-(\d+)$/, ([, d]) => ({ margin: `${d}px` })],],theme: {// 扩展主题（颜色、字体等）colors: {custom: '#f00'}},content: {// 指定需要扫描的文件（默认自动检测）pipeline: {include: [/\.(vue|svelte|tsx?|jsx?)$/]}},transformers: [transformerDirectives(), // @apply 等指令支持transformerVariantGroup() // 变体组语法支持]
})- 测试是否生效
至此配置完成！！
第三章 优化
- 小编研究的方法，添加一个cs方法：（作用：可以将类似功能类名分块写，比如宽高、边框、伸缩布局写一起等；以及代码格式化）
import { isArray, isObject, isString } from './is'export const cs = (...args) => {const length = args.lengthlet classNames = []for (let i = 0; i < length; i++) {const v = args[i]if (!v) {continue}if (isString(v)) {classNames.push(v)} else if (isArray(v)) {classNames = classNames.concat(v)} else if (isObject(v)) {Object.keys(v).forEach((k) => {if (v[k]) {classNames.push(k)}})} else {console.warn(true, 'arguments must be one of string/array/object.')}}return [...new Set(classNames)].join(' ')
}
const _toString = Object.prototype.toStringexport function isNumber(val) {return _toString.call(val) === '[object Number]'
}
export function isBoolean(val) {return _toString.call(val) === '[object Boolean]'
}
export function isArray(val) {return _toString.call(val) === '[object Array]'
}
export function isObject(val) {return _toString.call(val) === '[object Object]'
}
export function isString(val) {return _toString.call(val) === '[object String]'
}
export function isUndefined(val) {return _toString.call(val) === '[object Undefined]'
}
export function isFunction(val) {return _toString.call(val) === '[object Function]'
}- 例如：
第四章 遇到的问题并修复
"unocss/vite" resolved to an ESM file. ESM file cannot be loaded by `require`. See http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps]
报错原因：文件名被命名vite.config.js
修复：文件名被命名vite.config.mjs
原因：
https://vitejs.cn/vite5-cn/guide/troubleshooting.html
