3.4.4 @规则：导入自定义编码规范

团队项目里，配色、间距、断点如果散落在各个文件里，很快就会失控。正确的做法是把自定义的编码规范（变量、混入、工具类）收敛到核心目录，再通过 Sass 的 @规则供全局调用。

基础写法

推荐用 @use 导入（Sass 1.23+），作用域清晰，不会污染全局命名空间：

@use '@/styles/vars' as v;
@use '@/styles/mixins' as m;

.container {
  width: v.$content-max-width;
  @include m.flex-center;
}

如果项目还在用旧版 Sass，用 @import 也可以，但要注意规范文件里不要写具体 CSS 规则，避免重复输出：

@import 'styles/vars';
@import 'styles/mixins';

组织规范文件

按功能拆分，再通过 _index.scss 统一暴露：

src/styles/
├── _colors.scss      // 品牌色、功能色
├── _layout.scss      // 栅格、间距、断点
├── _mixins.scss      // 公共混入
└── _index.scss       // 统一出口

_index.scss 内容：

@forward 'colors';
@forward 'layout';
@forward 'mixins';

业务侧只需一行：

@use '@/styles' as s;
// 使用：s.$primary-color

避坑指南

1. 路径别名：在 vite.config.js 或 webpack.config.js 里配好 @/styles 的 resolve 路径，不要写相对路径 ../../../styles。
2. 不下划线不编译：规范文件命名必须带下划线（如 _vars.scss），否则会被当成独立入口编译出多余的 CSS。
3. 不要循环导入：A 文件 @use B，B 文件又 @use A，Sass 会直接报错。
4. 原生 @import 少用：CSS 原生的 @import url(...) 会阻塞渲染，且无法共享变量，只用于纯 CSS 场景。