VuePress2配置unocss的闭坑指南

VuePress结合Vite与UnoCSS的配置指南

原创已于 2025-05-06 14:39:24 修改 · 1.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2025-01-03 17:07:21 首次发布

随笔专栏收录该内容

55 篇文章

订阅专栏

文章目录

打一个小广告：
我在忙碌的技术生涯之余偶然踏入了命理的奇妙领域。原本只是好奇，没想到深入研究后，发现八字命理推算蕴含着巨大的智慧与实用价值。通过八字分析，能从一个独特的角度洞察自身性格、事业发展趋势、感情走向等诸多方面，为生活提供不少有价值的指引。
如今，我也在生活中给人批八字，想了解自己的运势走向，或者在生活中遇到了困惑，无论是事业抉择、感情难题，都欢迎来找我聊聊。扫描下方二维码，添加我的微信，借助古老的智慧，为现代生活找到更多方向与答案。
在这里插入图片描述

1. 安装依赖：准备魔法材料

在开始我们的前端魔法之前，我们需要准备好所有必要的魔法材料——即安装正确的依赖项。这一步骤至关重要，因为它奠定了我们整个项目的基础。

首先，我们将引入unocss以及@unocss/preset-rem-to-px。后者是专门用来将rem单位转换为px的预设，因为UnoCSS默认使用的是rem单位，而有时我们可能更倾向于直接使用像素值来定义样式。尽管UnoCSS允许你通过类似m-l-10px的方式直接指定像素，但为了代码的一致性和可读性，使用预设来统一处理单位转换是一个更好的选择。

安装这两个依赖项非常简单，只需要运行以下命令：

pnpm add -D unocss @unocss/preset-rem-to-px

接下来，我们要特别关注VuePress与它的Vite打包器之间的版本兼容性问题。以下是推荐的devDependencies配置：

"devDependencies": {
    "@vuepress/bundler-vite": "2.0.0-rc.19",
    "@vuepress/theme-default": "2.0.0-rc.49",
    "sass-embedded": "^1.79.4",
    "unocss": "^0.64.0",
    "@unocss/preset-rem-to-px": "^0.64.0",
    "vue": "^3.5.10",
    "vuepress": "2.0.0-rc.19",
    "vuepress-theme-plume": "1.0.0-rc.121"
}

这里强调的是@vuepress/bundler-vite和vuepress两个包必须保持一致的版本号，以避免由于版本不匹配导致的白屏或其他异常错误。其他如主题等组件，则应该根据需要选择相匹配的版本。

2. 检查依赖版本一定要一致：确保魔法配方准确无误

在魔法世界中，配方的准确性决定了最终效果的成功与否。同样地，在前端开发里，依赖项的版本一致性也是至关重要的。正如前面提到的，@vuepress/bundler-vite和vuepress必须具有相同的版本号。这是因为它们之间有着紧密的合作关系；一个负责构建工具链，另一个则是核心框架本身。如果两者版本不同步，可能会引发各种意想不到的问题，比如页面加载失败、样式错乱或是交互逻辑失效等。

此外，对于UnoCSS及其预设@unocss/preset-rem-to-px来说，也应尽量保证它们处于相同的主要版本系列内，这样可以最大限度地减少潜在冲突，确保功能正常运作。至于其他依赖，如Vue或特定的主题插件，则需根据官方文档或者社区反馈来决定最合适的版本组合。

3. 新建uno.config.js：编写咒语书

现在我们已经有了所有的魔法材料，接下来就是编写咒语书的时间了。在这个阶段，我们需要创建一个名为uno.config.js的文件，用于配置UnoCSS的行为。这份配置文件就像是魔法师手中的咒语书，它指导着UnoCSS如何为我们生成所需的样式规则。

以下是示例配置：

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

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetRemToPx({
      baseFontSize: 4,
    }),
  ],
  content: {
    filesystem: ["**/*.{html,vue,md}"],
  },
});

在这里，presetRemToPx被设置了一个基础字体大小为4px，这意味着当你写下像m-l-4这样的样式时，实际上就是在设定margin-left: 4px。这种做法不仅简化了样式控制，还提高了代码的可维护性和一致性。

4. 配置config.js和client.js：完成仪式

最后两步是为了确保一切顺利运行所做的收尾工作。首先是配置docs/.vuepress/config.js，这是VuePress站点的核心配置文件。我们将在此处引入UnoCSS并配置VuePress以使用Vite作为打包器。

import { viteBundler } from "@vuepress/bundler-vite";
import { defineUserConfig } from "vuepress";
import UnoCSS from 'unocss/vite';

export default defineUserConfig({
  // 请不要忘记设置默认语言
  
  bundler: viteBundler({
    viteOptions: {
      plugins: [
        UnoCSS(),
      ],
    },
  }),
 
});