常用的样式模块
- 重置浏览器默认样式
- 自定义的 css 样式
- 自定义主题样式
- 修改 element-ui 样式
- 存放项目统一规范的变量
CSS变量的使用
声明：声明变量的时候，变量名前面要加两根连词线（--）
读取：var（）
页面导入样式时，使用link和@import有什么区别？
1. 基本区别
| 特性 | <link> | @import |
|---|---|---|
| 使用方式 | 用于在 HTML 文件中引入样式表 | 用于在 CSS 文件中引入其他样式表 |
| 支持范围 | HTML 和 CSS 都可以使用 | 只能在 CSS 文件中使用 |
| 加载时机 | 浏览器解析 HTML 时立即加载样式表 | 样式文件加载完成后，逐步加载 @import 的文件 |
| 兼容性 | 兼容所有浏览器 | 早期 IE5 及以下版本不支持 |
| 优先级 | 同级样式表，按文件加载顺序确定优先级 | 同级样式表，@import 的优先级通常较低 |
| 网络请求 | 并行加载多个 <link> | 串行加载 @import 引入的文件 |
在现代前端工程化项目中，@import 的使用通常结合预处理器（如 Sass、Less）和构建工具（如 Vite、Webpack）进行，而非直接用于 CSS 文件。这种偏好主要基于以下原因：
@import允许将 CSS 拆分为多个小模块，通过模块化的方式管理不同的样式逻辑，方便团队协作和代码维护。- 在工程化构建过程中，
@import不再是逐步加载，而是通过工具（如 Webpack 或 Vite）合并为单个样式文件，最终避免了 HTTP 阻塞 - 结合预处理器，
@import可以导入带变量、函数、混合（mixin）的文件，为样式提供更大的灵活性。
