如何在uniapp项目中使用UnoCSS

zerojs 2025-03-23
154 阅读 0 评论 0 点赞

1. 什么是 UnoCSS

UnoCSS 是一个即时（on-demand）的原子化 CSS 引擎，其设计灵感来源于 Windi CSS 和 Tailwind CSS，但在性能和灵活性上进行了大幅优化。UnoCSS 的核心理念是根据你在模板中的类名，动态生成 CSS，避免了不必要的全局 CSS 加载。

2. 安装 UnoCSS

  • 在项目中引入 UnoCSS，可以通过以下命令安装：
  • unocss-applet 为了
css
 体验AI代码助手
 代码解读
复制代码
npm i unocss unocss-applet -D

3. 配置 UnoCSS

安装完成后，需要在项目中进行配置。以下是在 Vue 项目中使用 UnoCSS 的基本配置步骤：

  1. 在 vite.config.ts 中配置：
javascript
 体验AI代码助手
 代码解读
复制代码
import { defineConfig } from ''vite'';
import vue from ''@vitejs/plugin-vue'';
import UnoCSS from ''unocss/vite'';

export default defineConfig({
  plugins: [
    vue(),
    UnoCSS(),
  ],
});
  1. 创建 uno.config.ts 配置文件：

在项目的根目录下创建 uno.config.ts 文件，并添加以下内容：

php
 体验AI代码助手
 代码解读
复制代码
import {
    type Preset,
    type SourceCodeTransformer,
    presetUno,
    defineConfig,
    presetAttributify,
    presetIcons,
    transformerDirectives,
    transformerVariantGroup,
  } from ''unocss''
  
  import {
    presetApplet,
    presetRemRpx,
    transformerApplet,
    transformerAttributify,
  } from ''unocss-applet''
  
  // @see https://unocss.dev/presets/legacy-compat
//   import presetLegacyCompat from ''@unocss/preset-legacy-compat''
  
  const isMp = process.env?.UNI_PLATFORM?.startsWith(''mp'') ?? false
  
  const presets: Preset[] = []
  const transformers: SourceCodeTransformer[] = []
  if (isMp) {
    // 使用小程序预设
    presets.push(presetApplet(), presetRemRpx())
    transformers.push(transformerApplet())
  } else {
    presets.push(
      // 非小程序用官方预设
      presetUno(),
      // 支持css class属性化
      presetAttributify(),
    )
  }
  export default defineConfig({
    presets: [
      ...presets,
      // 支持图标，需要搭配图标库，eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`
      presetIcons({
        scale: 1.2,
        warn: true,
        extraProperties: {
          display: ''inline-block'',
          ''vertical-align'': ''middle'',
        },
      }),
      // 将颜色函数 (rgb()和hsl()) 从空格分隔转换为逗号分隔，更好的兼容性app端，example：
      // `rgb(255 0 0)` -> `rgb(255, 0, 0)`
      // `rgba(255 0 0 / 0.5)` -> `rgba(255, 0, 0, 0.5)`
    //   presetLegacyCompat({
    //     commaStyleColorFunction: true,
    //   }) as Preset,
    ],
    /**
     * 自定义快捷语句
     * @see https://github.com/unocss/unocss#shortcuts
     */
    shortcuts: [
      [''center'', ''flex justify-center items-center''],
      [''text-primary'', ''text-yellow''],
    ],
    transformers: [
      ...transformers,
      // 启用 @apply 功能
      transformerDirectives(),
      // 启用 () 分组功能
      // 支持css class组合，eg: `<div >测试 unocss</div>`
      transformerVariantGroup(),
      // Don''t change the following order
      transformerAttributify({
        // 解决与第三方框架样式冲突问题
        prefixedOnly: true,
        prefix: ''fg'',
      }),
    ],
    rules: [
      [
        ''p-safe'',
        {
          padding:
            ''env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)'',
        },
      ],
      [''pt-safe'', { ''padding-top'': ''env(safe-area-inset-top)'' }],
      [''pb-safe'', { ''padding-bottom'': ''env(safe-area-inset-bottom)'' }],
    ],
  })
  
  /**
   * 最终这一套组合下来会得到：
   * mp 里面：mt-4 => margin-top: 32rpx
   * h5 里面：mt-4 => margin-top: 1rem
   */

4. 在项目中引入 UnoCSS

在 main.ts 或 main.js 文件中引入 UnoCSS：

javascript
 体验AI代码助手
 代码解读
复制代码
import { createApp } from ''vue'';
import App from ''./App.vue'';
import ''virtual:uno.css'';

createApp(App).mount(''#app'');

5. 安装 iconify

在使用 iconify 之前需要安装对应的图标库，安装格式如下：

npm i -D @iconify-json/[the-collection-you-want]

这里选择的是 carbon 

执行 npm i -D @iconify-json/carbon 即可。

6. 使用实例

ini
 体验AI代码助手
 代码解读
复制代码
    <div class="content flex"  p="y-2 x-4">
      <view class="i-carbon-user-avatar"/>
      <view class="i-carbon-hexagon-outline text-orange"/>
    </div>

7. 常用文档导航

8. vscode辅助插件

  • UnoCSS
  • Iconify IntelliSense

常见问题

  1. 如何解决 unocss 不支持 CommonJS 的问题

error: 从 v0.59.x 开始，unocss 不再支持 CommonJS，仅支持 ESM。可以通过动态导入解决：

javascript
 体验AI代码助手
 代码解读
复制代码
import { defineConfig } from ''vite'';
import uni from ''@dcloudio/vite-plugin-uni'';

export default async () => {
  const UnoCSS = (await import(''unocss/vite'')).default;

  return defineConfig({
    plugins: [
      uni(),
      UnoCSS(),
    ],
  });
};
标签： 技术社区

相关文章