国内开源建站cms网站注销主体注销
Nuxt3中使用UnoCSS指南
UnoCSS是一个高度可定制的、原子化CSS引擎，可以轻松集成到Nuxt3项目中。下面介绍如何在Nuxt3中安装和配置UnoCSS。
安装步骤
安装UnoCSS的Nuxt模块：
# 使用pnpm
pnpm add -D unocss @unocss/nuxt# 使用yarn
yarn add -D unocss @unocss/nuxt# 使用npm
npm install -D unocss @unocss/nuxt# 使用bun
bun add -D unocss @unocss/nuxt
基础配置
在nuxt.config.ts文件中添加UnoCSS模块：
export default defineNuxtConfig({modules: ['@unocss/nuxt',],
})
创建uno.config.ts配置文件：
import { defineConfig } from 'unocss'export default defineConfig({// UnoCSS配置选项
})
预设配置
你可以在nuxt.config.ts中直接配置UnoCSS，启用不同的预设：
export default defineNuxtConfig({modules: ['@unocss/nuxt',],unocss: {// 预设uno: true, // 启用@unocss/preset-unoattributify: true, // 启用@unocss/preset-attributifyicons: { // 启用@unocss/preset-iconsextraProperties: {display: "inline-block",},customizations: {iconCustomizer(collection, icon, props) {// 默认图标大小props.width = "1.5em";props.height = "1.5em";},},},// 核心选项shortcuts: [],rules: [],},
})
安装图标预设（可选）
如果需要使用图标预设，需要额外安装：
pnpm add -D @unocss/preset-icons @iconify-json/mdi @iconify-json/mdi-light
使用rem转px预设（可选）
如果需要默认生成px单位而非rem单位：
- 安装rem转px预设：
npm i -D @unocss/preset-rem-to-px
- 在
nuxt.config.ts中配置：
import presetUno from "@unocss/preset-uno";
import presetRemToPx from "@unocss/preset-rem-to-px";
import presetAttributify from "@unocss/preset-attributify";
import presetIcons from "@unocss/preset-icons";export default defineNuxtConfig({modules: ['@unocss/nuxt'],unocss: {presets: [presetUno(),presetAttributify(),presetIcons(),presetRemToPx(),],shortcuts: [],rules: [],},
})
VS Code智能提示
安装UnoCSS的VS Code扩展可以获得智能提示支持。如果遇到问题，在nuxt.config.js中添加：
// 添加以下代码以启用UnoCSS VS Code扩展
import { defineNuxtConfig } from "nuxt/config";
然后尝试禁用并重新启用扩展。
UnoCSS会自动注入uno.css入口文件，不需要手动导入。这种轻量级且高度可定制的CSS解决方案可以显著提高Nuxt3项目的开发效率。