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