使用 unocss

问题

• unocss 怎么将 px 转为 rem，达到可以完全复现设计稿的目的？

样式重置

https://unocss.dev/guide/style-reset

下载：

npm install @unocss/reset

我偏向喜欢这个重置 css，因为它会去掉标签 html、body 的 padding、margin，还有 ul、li 的默认样式。

import '@unocss/reset/eric-meyer.css'

添加或移除被扫描文件列表

默认文件列表是 .jsx，.tsx，.vue，.md，.html，.svelte，.astro。

.js 和 .ts 文件默认是不会被包含的。

可以在某个文件（比如 .js 文件）的头部添加特殊注释来将这个文件添加到被扫描列表。

// @unocss-inclue
export const classes = {
  active: 'bg-primary text-white',
  inactive: 'bg-gray-200 text-gray-500',
}

或者将自己从扫描列表里移除：

// @unocss-ignore

还可以通过配置文件设置：

// uno.config.ts
export default defineConfig({
  content: {
    pipeline: {
      include: [
        // the default
        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
        // include js/ts files
        'src/**/*.{js,ts}',
      ],
      // exclude files
      // exclude: []
    }
  }
})

// 或者

// uno.config.ts
export default defineConfig({
  content: {
    filesystem: [
      'src/**/*.php',
      'public/*.html',
    ]
  }
})

safelist，确保 unocss 一定会转换

如果你像下面这样动态使用 unocss，是不会生效的！

<div class="p-${size}"></div>

不会生效的原因是 unocss 是在构建应用时静态提取 css 的。

为了这几个功能类一定生效，你可以在配置文件中设置 safelist：

// uno.config.ts
// 第一种写法
// safelist: 'p-1 p-2 p-3 p-4'.split(' ')
// 第二种写法，比第一种写法更灵活
safelist: [...Array.from({ length: 4 }, (_, i) => `p-${i + 1}`)]

这样子最终生产的 css 中一定包含如下 css：

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }

blocklist，确保 unocss 一定不会转换

blocklist 正好与 safelist 相反，它会排除一些功能类的生成。

// uno.config.ts
blocklist: [
  'p-1',
  /^p-[2-4]$/, // 可以使用正则
]

这将排除 p-1 和 p-2, p-3, p-4 的生成。