Angular由一个bug说起之十四：SCSS @import 警告与解决⽅案

SCSS @import 警告与解决⽅案

⚠ 警告信息

在 SCSS 中，使⽤  @import  可能会产⽣以下警告：

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

? 为什么会有这个警告？

Sass 官⽅已经废弃  @import ，推荐使⽤  @use  和  @forward  进⾏模块化管理。其主要原因包括：

命名冲突 ： @import  允许多个⽂件共享变量和混合宏，可能导致命名冲突。

重复导⼊ ： @import  可能导致相同的⽂件被导⼊多次，影响编译性能。

作⽤域问题 ： @import  导⼊的所有内容都是全局的，⽽  @use  采⽤更严格的作⽤域管理，避免变量污染。

? 如何复现这个警告？

创建以下 SCSS ⽂件，并尝试编译：

_variables.scss

$primary-color: blue;

style.scss

@import 'variables';
body {
background-color: $primary-color;
}

然后运⾏：

sass style.scss style.css

你将看到 @import  相关的警告信息。

✅ 如何正确替换 @import ？

_variables.scss

$primary-color: blue;

style.scss

@use 'variables' as v;
body {
background-color: v.$primary-color;
}

重新编辑后，警告消失

@import 的问题示例

1. 命名冲突

问题 @import  可能导致相同变量或 Mixin 被覆盖。 示例

_colors.scss

$primary-color: blue;

_theme.scss

$primary-color: red;

style.scss

@import 'colors';
@import 'theme';
body {
background-color: $primary-color;
}

结果

最终  body  的  background-color  变为 red，因为  theme.scss  覆盖了  colors.scss  的值。

2. 重复导⼊

问题

@import  可能导致相同的⽂件被多次导⼊，影响编译效率。

示例

_buttons.scss

.button {
padding: 10px;
border-radius: 5px;
}

_components.scss

@import 'buttons';

style.scss

@import 'buttons';
@import 'components';

结果

.button  的样式被重复⽣成两次，导致冗余代码。

3. 作⽤域问题

问题

@import  导⼊的变量和 Mixin 作⽤域是全局的，可能污染其他⽂件的变量。

示例

_variables.scss

$padding: 20px;

_card.scss

@import 'variables';
.card {
padding: $padding;
}

_button.scss

@import 'variables';
.button {
padding: $padding; // 可能需要不同的 padding，但被全局变量影响
}

由于变量是全局的，未来如果  variables.scss  修改  $padding ，所有引⽤的⽂件都会受影响，可能导致意外的样式变更。

✅@use  的优势

避免全局污染 ： @use  采⽤命名空间（如  v.$primary-color ），防⽌变量污染全局作⽤域。

避免重复导⼊ ： @use  只会导⼊⼀次，优化编译性能。

模块化管理 ：使⽤  @use  让代码更结构化，便于维护。

✅结论

✅ 尽早升级到 @use ，避免未来维护成本增加！