为什么Dart Sass废弃了@import以及如何用@use重构CSS？-css教程-PHP中文网

Dart Sass 2.0+彻底删除@import语法，写即报错；必须用@use替代，要求精确路径（如@use "variables"匹配_variables.scss）、强制命名空间访问（如variables.$primary-color），且混用@import会导致整个依赖链降级为不可靠的legacy模式。

为什么dart sass废弃了@import以及如何用@use重构css？

@import 在 Dart Sass 2.0+ 中不是“废弃”，而是被彻底删除——写它就编译失败，没有警告、无法降级、不支持任何配置开关关闭。 这不是迁移建议，是强制语法变更；所有仍含 @import 的文件，只要被直接或间接引入（哪怕注释里留着一行），整个模块链都会崩溃或静默退化为不可靠的 legacy 模式。

为什么 `@import` 必须被干掉？

它本质是无作用域的文本拼接：把目标文件内容原样塞进当前文件，变量、@mixin、函数全进全局作用域。这带来三个硬伤：

同名变量静默覆盖：_theme-a.scss 定义 $z-index: 10，_theme-b.scss 也定义 $z-index: 999，谁后 @import 谁赢，Sass 不报错、不提示、DevTools 只显示最后一处位置
重复解析：一个 _mixins.scss 被 8 个组件 @import，Sass 就解析 8 次，热更新变慢，CSS 体积膨胀
依赖图不可控：你无法知道某个 $color-primary 最终来自哪个文件，因为路径顺序、嵌套层级、第三方库混入全搅在一起

`@use` 路径和文件名必须精确匹配，否则直接报 `No module with the name`

这不是“找不到文件”的模糊错误，而是 Dart Sass 对模块系统的硬性校验——它不补扩展名、不猜下划线、不搜子目录、不处理空格或中文路径。

被导入文件必须以下划线开头 + .scss 后缀：_variables.scss ✅；variables.scss ❌；_variables.css ❌
@use "variables" → 自动匹配 _variables.scss；写 @use "_variables" 或 @use "variables.scss" 全部报错
路径是相对当前文件算起：src/components/button.scss 要引入 src/scss/_colors.scss，必须写 @use "../../scss/colors"，不能写 @use "colors"
路径含空格或中文 → Dart Sass 直接拒绝解析，不报错也不警告

`@use` 后所有变量/混入都报 `Undefined variable`？不是 bug，是命名空间生效了

@use 默认不向全局注入任何东西。你写的 $spacing-md 是在找全局变量，但它实际藏在命名空间下——这是设计，不是缺陷。

CSS婚礼策划服务机构宣传网站模板

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

下载

@use "variables" → 必须用 variables.$spacing-md，写 $spacing-md 或 vars.$spacing-md 都会失败
@use "variables" as v → 必须用 v.$spacing-md；v 是你指定的前缀，不能省、不能错、不能和文件名混淆
@use "mixins" as * 在 Dart Sass 5.0+ 中已被明确禁止，语法错误，不是“不推荐”
连字符变量名（如 $text-sm）不会自动转驼峰（$textSm），必须原样访问：variables.$text-sm

纯 CSS 文件（如 `normalize.css`）怎么引入？

@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 文件

最易被忽略的是：只要项目里存在一个未升级的第三方库（比如 Bootstrap 4.x），它内部还在用 @import，而你的入口文件又直接或间接引用了它，整个构建链就会被拖回 legacy 模式——@use 失效、命名空间消失、变量裸名访问恢复，但错误不会报出来，只会静默失效。迁移不是改几行语法，是重建模块边界；漏掉一个路径、少写一个前缀、多加一个下划线，样式就断在看不见的地方。