Vuepress2中使用UnoCss与tailwindcs

Vuepress2中使用UnoCss与tailwindcss

使用UnoCss

使用Vuepress2 搭建个人blog，日常开发中习惯了使用 UnoCss 开发，于是决定研究一下如何在 Vuepress 中使用，遂记之。

本文基于默认主题，使用 Vite作为构建工具(官网的模板vuepress-starter)。

既然是用的Vite打包，那么可以参考 UnoCss 关于Vite项目中使用的相关文档：UnoCss - Vite Plugin

安装

    pnpm add -D unocss

配置

项目根目录创建 uno.config.ts 文件，内容如下：

import { defineConfig, presetUno } from 'unocss'

export default defineConfig({
  content: {
    filesystem: [
      '**/*.{vue,md}', // 
    ],
  },
  presets: [
    presetUno(),
  ],
})

在Vite 配置中增加 UnoCss 插件的使用，这里的Vite配置是在 docs/.vuepress/config.ts 文件中，内容如下：

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

export default defineUserConfig({
     bundler: viteBundler({
        viteOptions: {
            plugins:[
                UnoCSS(),
            ],
        }
        // ...
    }),
    // ...
})

最后按官网教程是要在入口文件引入uno.css: import 'virtual:uno.css'
这个地方需要在 docs/.vuepress/client.ts 中引入：

import { defineClientConfig } from "vuepress/client"

import NotFound from "./layouts/NotFound.vue"
import About from "./layouts/About.vue"
import TagMap from "./layouts/TagMap.vue"
import Home from "./layouts/Home.vue"
// 在这里引入
import "uno.css";

export default defineClientConfig({
    // @ts-ignore
    enhance({ app, router, siteData }) { },
    setup() { },
    rootComponents: [],
    layouts: {
        NotFound,
        About,
        TagMap,
        Home
    }
})

重启服务，即可在项目中使用 UnoCss 了。

---

使用tailwindcss

萝卜青菜，各有所爱，当然 tailwindcss 也是可以在项目中使用的。 tailwindcss 可以通过 postcss 的方式来使用：

安装 postcss 与 tailwindcss

pnpm add -D postcss tailwindcss

由于这个是之前弄得，隐约间记得当初弄得时候有点问题，折腾了不少时间，不在一一描述

postcss 使用 8.4.35版本，对应得tailwindcss版本是 3.4.1。 可以省下不少事情。

配置

根目录创建 tailwind.config.ts ：

export default {
    content: [
        "*.md",
        "docs/.vuepress/**/*.vue"
    ]
}

在Vite 配置中增加 tawilwindcss 插件，这里的Vite配置是在 docs/.vuepress/config.ts 文件中，内容如下：

import { viteBundler } from "@vuepress/bundler-vite"
import AutoPrefixer from "autoprefixer"
import { TailWindCss } from 'tailwindcss';

export default defineUserConfig({
     bundler: viteBundler({
        viteOptions: {
            注入tailWindCss
            css: {
                postcss: {
                    plugins: [
                        TailWindCss(),
                        AutoPrefixer(),
                    ]
                }
            }
        }
    }),
    // ...
})

由于是通过postcss 插入，这里会把默认得 postcss 配置覆盖掉，所以需要自己把 AutoPrefixer 也加进去

注入Css指令

在 docs/.vuepress/styles/index.scss 中注入指令，如果没有这个文件，手动创建一个

@tailwind components;
@tailwind utilities;

重启服务，即可生效

END