@function 本身不导致样式冲突，但同名函数在 @import 混用或裸 as * 下引发调用歧义，造成 css 输出错误；应统一使用 @use 命名空间并禁用 @import。
不是 SCSS 编译报错，而是浏览器最终加载的 CSS 规则发生了层叠覆盖——@function 本身不会导致类名冲突，但你在多个 @use 模块里定义了同名 @function，又用 @import 或裸 as * 混入全局，就让函数调用歧义，间接引发样式输出不一致。
为什么 @function 会“引发”命名冲突？
SCSS 的 @function 是编译期工具，它不输出 CSS，所以本身不会造成浏览器端样式覆盖。真正出问题的是：你写了两个同名函数（比如都叫 px-to-rem），一个返回 16px → 1rem，另一个返回 16px → 0.875rem，而调用时没加命名空间前缀，结果 Sass 随机选了一个执行——最终生成的 CSS 尺寸就错了，看起来像“样式冲突”。
常见错误现象：
- 同一项目里
utils/_convert.scss和theme/_typography.scss都定义了@function px-to-rem($px) - 你用
@import "utils/convert"+@import "theme/typography"，后者直接覆盖前者，调用px-to-rem(16)总是走 theme 版本 - 你改了 utils 版本的逻辑，但样式没变——因为根本没被调用
用 @use 加命名空间才是正解
@use 强制函数归属到独立命名空间，调用必须带前缀，彻底消除歧义。这不是可选项，是 Dart Sass 2026 年起的硬性要求。
-
@use "utils/convert" as u;→ 必须写u.px-to-rem(16)，不能直接写px-to-rem(16) -
@use "theme/typography" as t;→ 对应t.px-to-rem(16)，和u完全隔离 - 路径必须指向 partial（即带下划线的文件）：
@use "utils/convert"✅，@use "utils/convert.scss"❌ - 如果两个模块都导出同名函数，又不想每次敲前缀，可用
as *但仅限统一入口聚合，禁止在组件文件里直接@use "xxx" as *
混用 @import 和 @use 会直接降级失效
只要文件里出现任意一行 @import，整个文件及其所有依赖都会退回到 legacy 模式——@use 命名空间消失，所有函数、变量回归裸名访问，静默覆盖立刻重现。
- 现象：
@use "colors" as c;后写c.$primary报错Undefined variable - 排查点：检查当前文件或它
@use的任何依赖里，是否藏了@import "reset"这类语句 - 构建工具（如 Vite）的
additionalData里如果写了@import，也会触发整项目降级 - CI 中建议加 ESLint 规则禁用
@import和裸as *，否则人一疏忽就破防
最易被忽略的一点：函数冲突往往不报错，只悄悄输出错误尺寸。你得盯着编译后的 CSS 检查 font-size: 0.875rem 是否该是 1rem——而不是等 UI 同事提 bug 才发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
