import{o as s,c as a,a as e}from"./app.c38d1953.js";const n='{"title":"样式","description":"","frontmatter":{},"headers":[{"level":2,"title":"介绍","slug":"介绍"},{"level":2,"title":"unocss","slug":"unocss"}],"relativePath":"guide/design.md","lastUpdated":1721206001124}',t={},p=e('
主要介绍如何在项目中使用和规划样式文件。
默认使用 less
作为预处理语言,建议在使用前或者遇到疑问时学习一下 Less 的相关特性。
项目中使用的通用样式,都存放于 src/style/ 下面。
.\n├── index.less # 入口\n├── theme.less # 主题相关\n├── var.css # css变量\n└── variables.module.less # less变量\n\n
全局注入
variables.module.less 这个文件会被全局注入到所有文件,所以在页面内可以直接使用变量而不需要手动引入。
var.css 则是注入到根元素,所以在每个地方也都能用到。
项目中使用了 unocss,具体参见文件使用说明。
可能没有用到人会觉得用起来很不习惯,但就个人而言,用起来还是挺香的。减少了很多不必要的麻烦
语法如下:
<div class="relative w-full h-full px-4"></div>\n