dart sass中@import定义的函数失效,因其被移除且@use默认不暴露全局函数,必须通过命名空间(如functions.px-to-rem)或as *显式调用,且函数文件须纯净、依赖需@forward声明。

全局函数在 Dart Sass 中不会“影响编译”本身,但如果你发现 CSS 输出异常、变量未生效、或编译失败,大概率是函数定义方式与 @use 模块系统冲突——Dart Sass 要求函数必须显式导出并带命名空间访问,不能靠 @import 注入到全局。
为什么 @import 定义的函数在 Dart Sass 里突然失效
旧写法 @import "functions" 把整个文件内容拼进当前作用域,函数像 px-to-rem($val) 直接可用;但 Dart Sass 3.0+ 已移除 @import 支持,且 @use 默认不暴露任何成员到全局。没加 as * 或没显式调用命名空间,函数就根本不可见。
-
@use "functions"→ 必须写functions.px-to-rem(16px),直接写px-to-rem(16px)报错Undefined function "px-to-rem" -
@use "functions" as *→ 允许直接调用px-to-rem(16px),但仅限该文件内有效;跨文件仍需各自@use - 函数文件里写了
body { color: red }这类 CSS 规则?Dart Sass 会把它当成样式输出到每个引入处,造成重复、错序甚至语法错误
@use 下函数必须用 @forward 才能被下游复用
如果 functions.scss 依赖 math 或自定义 utils/_strings.scss,不能在它内部用 @import 加载,而要用 @forward 声明透出能力——否则下游 @use "functions" 根本看不到 functions.divmod()。
-
functions.scss内必须写:@forward "sass:math"; @forward "./utils/strings" as strings-*; - 不能写
@use "sass:math"然后封装成新函数再@export——@export不是标准语法,Dart Sass 不支持 -
@forward只声明“我能提供什么”,不执行加载;下游@use "functions"时,sass:math和strings才真正解析一次
函数名含连字符时调用必须保持原样
Dart Sass 不做自动驼峰转换,strip-unit($val) 就是 strip-unit,不能写成 stripUnit,哪怕你用了 as * 也一样。
-
@use "functions" as f;→ 正确:f.strip-unit(1rem);错误:f.stripUnit(1rem) -
@use "functions" as *→ 正确:strip-unit(1rem);错误:stripUnit(1rem) - 函数参数默认值带
!default?注意:它只在首次@use时生效,后续同路径@use不再回退赋值
最容易被忽略的是函数文件的“纯度”:它只能包含 $var、@function、@mixin,不能混任何选择器或 @keyframes;一旦有,就会被当成样式片段插入到每个引用它的组件中,导致 CSS 顺序错乱、体积膨胀、甚至解析失败。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











