Dart Sass 2.0即将彻底移除@import该如何重构旧CSS-css教程-PHP中文网

直接替换@import为@use会编译失败，因dart sass 2.0+已彻底移除@import，@use强制命名空间隔离（如colors.$primary-color）、路径须精确匹配下划线partial文件（如_variables.scss）、纯css需包装层引入。

dart sass 2.0即将彻底移除@import该如何重构旧css

直接把 @import 换成 @use 会大面积报错，不是语法替换问题，而是模块系统彻底重写——变量全变私有、路径校验变严格、纯 CSS 文件必须包装，不重构访问方式和文件结构，编译器一步都走不动。

这不是 bug，是 @use 强制启用命名空间隔离的必然结果。旧写法 $primary-color 会去查全局，但新机制下它只存在于 colors.$primary-color 这个命名空间里。

@use "variables" → 必须写 variables.$primary-color，前缀就是文件名（不含 _ 和 .scss）
@use "variables" as v → 必须写 v.$primary-color，写成 variables.$primary-color 或 $primary-color 都会失败
连字符变量如 $text-sm，不能写成 $textSm —— Sass 不做驼峰转换
@use "variables" as * 可解构，但只能用一次；多个 as * 会静默覆盖同名变量，不推荐

这不是路径写错了，是文件名或位置不合规。@use 不补扩展名、不猜文件名、不搜子目录，只认以 _ 开头的 partial 文件，且路径必须从当前文件出发精确计算。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

要导入 src/scss/_colors.scss，在 src/components/button.scss 里得写 @use "../../scss/colors"，不能写 @use "colors"
写 @use "_colors" 或 @use "colors.scss" 都会报错 —— @use 只接受不带下划线、不带扩展名的模块名
路径含空格或中文，Dart Sass 直接拒绝解析，不报错也不警告
第三方库（如 Bootstrap 4）仍用 @import，一旦被你的文件间接引入，整个依赖链都会降级回 legacy 模式，@use 失效

@use 完全不支持直引 .css 文件，遇到 /* 开头就报 Invalid CSS after ""。必须用一个本地 Sass 文件做“包装层”。

新建 _normalize-wrapper.scss（注意下划线），内容只有一行：@import "node_modules/normalize.css/normalize.css";
这个包装文件里不能写任何 Sass 逻辑（变量、@mixin、@use），否则可能触发解析失败
主文件中写 @use "normalize-wrapper" 或 @use "normalize-wrapper" as *
别写 @use "normalize.css" —— 这既不是合法模块名，也不符合 partial 命名规则

Dart Sass 2.0 不是“弃用”，而是彻底移除 / 的除法语义。所有未替换的 /（在 calc() 外）都会直接编译失败。

必须先 @use "sass:math"，然后用 math.div($a, $b)，不能省略 math. 前缀
参数单位必须一致：math.div(16px, 2) ✅，math.div(1rem, 2) ❌（1rem 是带单位值，但 math.div 不自动转换单位）
calc(100% / 3) 里的 / 是安全的，不用改 —— 这是 CSS 原生上下文，由浏览器运行时处理
隐藏最深的坑在 grid-template-columns: 1fr / 2fr 这类地方：旧写法会被误判为除法，必须改成 1fr 2fr 或用 calc()