一年上线三百个营销活动总结，UnoCSS + PostCSS 最佳实践

我不叫王小红
449 阅读3分钟

前言

在过去的一年中，我们团队在一个高频次的营销活动平台上成功上线了三百多个营销活动。为了提升开发效率、优化性能并确保项目的可维护性，我们在前端开发中引入了多种工具与技术，特别是在样式管理与移动端适配方面，UnoCSS 和 PostCSS 成为了我们的核心利器。

本文将分享我们在使用 UnoCSS 和 PostCSS 过程中的一些最佳实践。

PS：以下是我们团队过去一年中所有上线的活动数量：

image.png

因为项目商业原因，我这里无法贴图展示活动。

一、UnoCSS

UnoCSS 是一款高效的原子化 CSS 引擎，它的最大特点是能够在开发过程中按需生成样式，极大地减少了冗余的 CSS 代码，并且相比传统的 CSS 框架，它生成的样式表体积更小，加载速度更快。

关于 UnoCSS 使用文档可以参考我上一篇文章：# 公司内部 UnoCSS 培训文档，含日常使用小技巧，赶紧收藏起来！。

UnoCSS 与 PostCSS 配合使用

UnoCSS 的强大之处在于它与 PostCSS 的结合，能够为项目带来更多的配置选项和兼容性支持。例如，在将 UnoCSS 与 PostCSS 结合使用时，我们不仅可以利用 UnoCSS 提供的高效样式生成能力，还能通过 PostCSS 处理样式的兼容性问题，例如自动添加浏览器前缀或进行样式压缩。

以下是 UnoCSS 与 PostCSS 集成的配置示例：

import { defineConfig, presetUno } from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'
import UnoCSS from '@unocss/postcss'

export default defineConfig({
  content: {
    filesystem: [
      './src/**/*', // 仅处理当前项目中的样式文件
    ],
  },
  presets: [
    presetUno(), // UnoCSS 的原子化支持
    presetRemToPx({
      baseFontSize: 4, // 基础 font-size，支持直接书写 px 样式
    }),
  ],
})

在这个配置中，我们通过 PostCSS 插件对 rem 单位进行转换，将其转为 px 单位，从而保证了设计图中精确的像素值能够在页面中实现。这样一来，我们可以直接使用设计图中的像素值进行样式书写，避免了手动计算 rem 和 px 的换算。

例如，在 UnoCSS 中书写样式时，可以直接使用类名而不需要关心具体的 CSS 规则：

<img class="absolute top-376 right-0 w-77 h-200" src="image.png">

在这种方式下，无论是设计师提供的图稿还是开发人员书写的样式，都能快速统一和调整，提高了开发的灵活性和效率。

二、PostCSS：转换 px 为 rem

在我们的项目中，除了 UnoCSS 使用了 px 单位外，我们还在普通的 <style> 标签内采用 px 单位书写样式，并通过 PostCSS 的 postcss-pxtorem 插件将 px 自动转换为 rem 单位，保持移动端适配的统一性和流畅性。

PostCSS 配置示例

在实际开发中，我们使用 PostCSS 进行样式转换，具体配置如下：

在 App.vue 中配置根节点的字体大小：

<!-- App.vue -->
<style>
html{
  font-size: calc(100vw / 10) !important;
}
</style>

在 postcss.config.mjs 中配置 UnoCSS 和三方库的 rootValue：

import UnoCSS from '@unocss/postcss'
import PxToRem from 'postcss-pxtorem'

export default {
  plugins: [
    UnoCSS(),
    PxToRem({
      rootValue({ file }) {
        return file.includes('vant') ? 37.5 : 75;
      },
      propList: ['*'], 
    }),
  ],
}

在此配置中，我们通过 postcss-pxtorem 插件自动将 px 转换为 rem，使得样式更适合移动端设备，同时能够保持跨设备的一致性。我们还设置了不同的 rootValue，根据不同的组件库（如 Vant）来调整根字体大小，确保样式符合设计要求。

通过结合 UnoCSS 和 PostCSS，我们不仅提升了开发效率，还确保了营销活动页面的高性能和跨设备兼容性。无论是样式的管理还是移动端的适配，我们都通过精心配置和优化，确保了页面能够在各种设备上提供卓越的用户体验。

avatar
文章
阅读
粉丝