使用原子化 CSS 能力

原子化 CSS 是一种 CSS 写法，它将 CSS 样式拆分成一个个独立的样式，每个样式只包含一个属性，比如：

/* 原子化 CSS */
.mt-10 {
  margin-top: 10px;
}

通过原子化 CSS 能力，可以方便地支持响应式布局，以及减少 CSS 文件体积。

ice.js 官方提供了 @ice/plugin-unocss 插件，可以方便开发这一键开启原子化 CSS 能力。

开启插件

安装插件：

$ npm i -D @ice/plugin-unocss

在 ice.config.mts 中添加插件：

ice.config.mts

import { defineConfig } from '@ice/app';
import Unocss from '@ice/plugin-unocss';

export default defineConfig(() => ({
  plugins: [
    Unocss(),
  ]
}));

配置

为了方便开发者便捷使用，@ice/plugin-unocss 内置了默认的 preset，开发者无需额外配置，可以通过插件配置项对内置配置进行覆盖：

ice.config.mts

import { defineConfig } from '@ice/app';
import Unocss from '@ice/plugin-unocss';
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss';

export default defineConfig(() => ({
  plugins: [
    Unocss({
      shortcuts: [
        // ...
      ],
      theme: {
        colors: {
          // ...
        }
      },
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons(),
        presetTypography(),
        presetWebFonts({
          fonts: {
            // ...
          },
        }),
      ],
      transformers: [
        transformerDirectives(),
        transformerVariantGroup(),
      ],
    }),
  ],
}));

插件配置能力，同 UnoCSS 配置能力保持一致，更多配置能力，请参考 UnoCSS 配置文档。