样式

介绍

主要介绍如何在项目中使用和规划样式文件。

默认使用 less 作为预处理语言,建议在使用前或者遇到疑问时学习一下 Less 的相关特性。

项目中使用的通用样式,都存放于 src/style/ 下面。

.
├── index.less # 入口
├── theme.less # 主题相关
├── var.css  # css变量
└── variables.module.less # less变量

全局注入

variables.module.less 这个文件会被全局注入到所有文件,所以在页面内可以直接使用变量而不需要手动引入。

var.css 则是注入到根元素,所以在每个地方也都能用到。

unocss

项目中使用了 unocss,具体参见文件使用说明。

可能没有用到人会觉得用起来很不习惯,但就个人而言,用起来还是挺香的。减少了很多不必要的麻烦

语法如下:

<div class="relative w-full h-full px-4"></div>