如何用@use替代Sass中已废弃的@import语法？

替代方案：使用@use指令 #

SCSS已废弃@import语法，推荐用@use实现模块化导入，配合!default为核心文件变量设置默认值，以此支持多主题的自定义配置。

步骤1：改造核心文件_tumblelog.scss

给变量添加!default声明，允许外部传入的值覆盖默认值（这里设为null是合理选择，也可替换为通用默认色如#fff）：

$background-color: null !default;

body {
    background-color: $background-color;
}

步骤2：修改主题SCSS文件

用@use ... with (...)语法传递自定义变量，替代原有的@import写法：

@use 'tumblelog' with (
    $background-color: red
);

你的写法是否正确？ #

完全正确。这种写法符合SCSS模块化的最佳实践：

• !default标记让核心变量支持外部覆盖，保留了主题定制的灵活性；
• @use with语法清晰传递自定义变量，避免了@import带来的全局变量污染问题；
• 语法完全符合SCSS规范，编译时不会出现错误。

补充提醒：如果主题文件未通过with传入$background-color，body的background-color会被设为null，此时浏览器会使用默认背景色（通常为白色）。若需要更稳妥的默认值，可将核心文件中的null替换为具体颜色，比如#ffffff !default。

内容的提问来源于stack exchange，提问作者John Bokma