Nuxt3中使用UnoCSS指南

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单位：

1. 安装rem转px预设：

npm i -D @unocss/preset-rem-to-px

2. 在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项目的开发效率。