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項目的開發效率。