Unocss的使用

完整的 UnoCSS 配置，通过导入必要的模块，定义了项目的主题变量、样式快捷方式、扫描规则、转换器和预设等，为项目中的样式管理提供了基础配置。

导入模块

import { defineConfig } from '@unocss/vite';
import transformerDirectives from '@unocss/transformer-directives';
import transformerVariantGroup from '@unocss/transformer-variant-group';
import presetUno from '@unocss/preset-uno';
import type { Theme } from '@unocss/preset-uno';
import { presetSoybeanAdmin } from '@sa/uno-preset';
import { themeVars } from './src/theme/vars';

• 导入 UnoCSS 相关模块，包括配置定义、转换器、预设等。

• defineConfig 用于定义 UnoCSS 配置。

• transformerDirectives 和 transformerVariantGroup 是用于处理指令和变体组合的转换器。

• presetUno 是 UnoCSS 的默认预设，提供基础的样式规则。

• Theme 类型用于定义主题结构。

• presetSoybeanAdmin 是一个自定义的 UnoCSS 预设，可能包含特定的样式规则和组件样式。

• themeVars 是项目中自定义的主题变量，从本地路径导入。

导出配置

export default defineConfig<Theme>({

• 使用 defineConfig 导出 UnoCSS 配置，并指定主题类型为 Theme。

内容配置

  content: {
    pipeline: {
      exclude: ['node_modules', 'dist']
    }
  },

• 配置 UnoCSS 扫描内容的管道。

• exclude 指定排除的目录，避免扫描 node_modules 和 dist 目录，提高构建效率。

主题配置

  theme: {
    ...themeVars,
    fontSize: {
      'icon-xs': '0.875rem',
      'icon-small': '1rem',
      icon: '1.125rem',
      'icon-large': '1.5rem',
      'icon-xl': '2rem'
    }
  },

• 合并 themeVars 到主题中，扩展或覆盖默认主题变量。

• 定义字体大小相关的主题变量，特别是针对图标的不同尺寸。

快捷方式配置

  shortcuts: {
    'card-wrapper': 'rd-8px shadow-sm'
  },

• 定义样式快捷方式，card-wrapper 对应的样式是 rd-8px shadow-sm，简化在组件中使用这些样式的代码。

转换器配置

  transformers: [transformerDirectives(), transformerVariantGroup()],

• 配置 UnoCSS 的转换器，用于处理指令和变体组合，增强样式的灵活性和可读性。

预设配置

  presets: [presetUno({ dark: 'class' }), presetSoybeanAdmin()]

• 使用 presetUno 预设，并配置暗黑模式通过类名控制。

• 使用 presetSoybeanAdmin 预设，可能包含项目特定的样式规则和组件样式。