UnoCSS Options
我们默认集成了 UnoCSS 以下 presets 预设。
presetUno: 一些常用按需生成的样式，类 TailwindCSS。presetAttributify: 使用属性选择器替代类名。presetIcons: 集成了 icones 图标库，按需使用。presetTypography: 排版相关的样式预设。
因此，你可以直接在 Markdown 中快速实现各式各样的效果。
We have integrated UnoCSS by default with the following presets.
presetUno: Some commonly used on-demand generated styles, similar to TailwindCSS.presetAttributify: Use attribute selectors instead of class names.presetIcons: Integrated with the icones icon library for on-demand usage.presetTypography: Typography-related style presets.
Therefore, you can quickly achieve various effects directly in Markdown.
See UnoCSS | Markdown.
unocss
您可以在主题 theme 目录的 uno.config.ts 或 unocss.config.ts 文件中编写 UnoCSS 配置，也可以在 valaxy.config.ts 文件的 unocss 配置项中进行配置。以下是 valaxy.config.ts 中 unocss 配置项的示例:
You can write UnoCSS configurations in the uno.config.ts or unocss.config.ts files within the theme directory. Alternatively, you can configure it in the unocss property of the valaxy.config.ts file. Below is an example of the unocss configuration in valaxy.config.ts:
import { presetIcons } from 'unocss'
export default defineValaxyConfig<ThemeConfig>({
unocss: {
shortcuts: [
{
'bg-base': 'bg-white dark:bg-black',
'color-base': 'text-black dark:text-white',
'border-base': 'border-[#8884]',
},
],
rules: [
['theme-text', { color: '#4b4b4b' }],
],
},
})在 unocss 配置项中直接配置 presets 会覆盖主题和 Valaxy 默认的 presets。如果想扩展这些预设，请使用 unocssPresets
Directly configuring presets in the unocss option will override the default presets of the theme and Valaxy. To extend these presets, use unocssPresets.
import { presetIcons } from 'unocss'
export default defineValaxyConfig<ThemeConfig>({
unocss: {
presets: [
presetIcons({
extraProperties: {
'display': 'inline-block',
'height': '1.2em',
'width': '1.2em',
'vertical-align': 'text-bottom',
},
}),
],
},
})TIP提示
在 uno.config.ts 或 unocss.config.ts 文件中配置 presets 也会覆盖 Valaxy 或主题的默认预设。
若要扩展预设，请使用 unocssPresets 。
TIP提示
Configuring presets in the uno.config.ts or unocss.config.ts files will also override the default presets of Valaxy or the theme. To extend the presets, use unocssPresets.
unocssPresets
若要在 Valaxy 中扩展 UnoCSS presets 配置项，以下是一个基本示例
To extend the UnoCSS presets in Valaxy, here is a basic example:
import { presetIcons } from 'unocss'
export default defineValaxyConfig<ThemeConfig>({
unocssPresets: {
icons: {
extraProperties: {
'display': 'inline-block',
'height': '1.2em',
'width': '1.2em',
'vertical-align': 'text-bottom',
},
},
},
})DANGER警告
以下方式是错误的写法，注意 unocssPresets 和 unocss 配置项之间的区别
The following method is incorrect. Note the difference between the unocssPresets and unocss configuration options:
import { presetIcons } from 'unocss'
export default defineValaxyConfig<ThemeConfig>({
unocssPresets: {
// ❌ This won't work
icons: presetIcons({
extraProperties: {
'display': 'inline-block',
'height': '1.2em',
'width': '1.2em',
'vertical-align': 'text-bottom',
},
}),
},
})FAQ
About UnoCSS Hot Reloading Failure
关于 UnoCSS 热重载失效
由于目前无法获取 UnoCSS 的 ctx，暂时还没有找到一个好的方法来实现热重载 #48
Currently, due to the inability to access UnoCSS’s ctx, we have not yet found a good method to implement hot reload. #48
To Be Continued.