RE: RE: Nuxt开发指南
You are viewing a single comment's thread from:

RE: Nuxt开发指南

Words
44
Reading
1 min
Listen
Play
7M

这是一个按需原子化 CSS 引擎,比起直接使用 TailwindCSS 更轻更快!
它的预设样式可以直接使用 TailwindCSS 和 Windicss 的样式。

yarn add unocss @unocss/nuxt //^66.5.2

//1. 配置模块,nuxt.config.ts:
  modules: [
    '@unocss/nuxt',
  ],

//2. 根目录创建 uno.config.ts
import {
  defineConfig, presetAttributify, presetIcons,
  presetTypography, presetUno, presetWebFonts,
  transformerDirectives, transformerVariantGroup
} from 'unocss'

export default defineConfig({
  rules: [
      //...
  ],
  shortcuts: [
    // ...
  ],
  theme: {
    colors: {
      // ...
    }
  },
  presets: [
    presetUno(),  //工具类预设
    presetAttributify(),  //属性化模式支持
    presetIcons(),    //icon支持
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
})
@lemooljiang: 这是一个按需原子化 CSS | Ecency