\_reset.scss 必须以下划线前缀命名，仅能在主 SCSS 入口用 @import 引入且置于最前；不可用 @use 或直接引入，内容须克制，仅处理盒模型、间距与继承，变量需提前导入。
reset.scss 文件必须用下划线前缀
SCSS 编译器会把所有以 _ 开头的文件识别为 partial（局部文件），不会单独编译成 CSS。如果你命名成 reset.scss 而不是 _reset.scss，它会被当成入口文件输出一份空或重复的 CSS，导致样式污染或构建失败。
常见错误现象：开发时样式看似正常，但构建后发现多出一份无内容的 reset.css，或者重置规则被应用了两次。
- 正确路径：
src/assets/scss/_reset.scss - 禁止在
vite.config.ts的css数组里直接引入它——那会当纯 CSS 加载，跳过 Sass 编译逻辑 - 也不要在 Vue 组件的
<style lang="scss">里用@import单独引入——破坏模块隔离
@use 是唯一推荐的导入方式，但不能直接用于 reset 规则
@use 本质是模块系统，只对变量、函数、mixin 生效；而 reset 是一堆顶层 CSS 声明（如 body { margin: 0 }），它没有命名空间概念，@use './_reset.scss' as reset 不会生效。
所以你必须在项目最外层的主 SCSS 入口（比如 main.scss 或 index.scss）中用 @import 引入，且必须放在所有业务样式之前：
立即学习“前端免费学习笔记（深入）”；
@import 'base/_reset'; @import 'base/_variables'; @import 'base/_mixins'; @import 'components/button';
注意：@import 在 Sass 旧版中已被标记为 deprecated，但对纯 CSS 规则（如 reset）仍是唯一可行方式。Vite / Webpack 的 Sass 加载器仍支持它，只是控制台会有警告——这不是 bug，是设计使然。
reset 内容要克制，别混进业务语义
一份干净的 _reset.scss 只该做三件事：归一化盒模型、清空默认间距、重设基础继承关系。任何带业务含义的样式（比如 .btn、$card-shadow）都属于 components/ 或 utils/ 目录。
典型误操作：
- 在
_reset.scss里写a { color: $primary-color }—— 颜色应由_variables.scss定义，链接样式由_typography.scss或components/link.scss处理 - 加入
@media (max-width: 768px) { body { font-size: 14px } }—— 响应式逻辑属于utils/_mixins.scss或布局层 - 用
all: unset替代逐项重置 —— 它会抹掉display、position等关键属性，导致布局崩溃
全局变量和 reset 必须分两路注入
Vite 的 vite.config.ts 中，css.preprocessorOptions.scss.additionalData 只负责把变量、mixin 注入每个 <style lang="scss"> 块；而 reset 规则必须通过 @import 在主 SCSS 文件中显式加载。
配置示例：
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/assets/scss/_variables.scss" as *; @use "@/assets/scss/_mixins.scss" as *;'
}
}
}
这样，你在任意组件里写 $primary-color 或 @include respond-to(md) 都能直接用；但 reset 样式仍需靠 @import 'base/_reset' 来触发输出。两者缺一不可，也不能互换位置。
最容易被忽略的一点：如果 _reset.scss 里引用了 $font-size 这类变量，它不会自动感知 additionalData 注入的内容——因为 @import 是编译时行为，不走模块作用域。所以 reset 文件里只能用字面量，或确保变量已在它之前被 @import 进来（比如把 _variables.scss 放在 _reset.scss 前面 import）。
