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-uno
    attributify: true,    // 启用@unocss/preset-attributify
    icons: {              // 启用@unocss/preset-icons
      extraProperties: {
        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项目的开发效率。