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

SCSS @import 警告与解决⽅案

⚠ 警告信息

在 SCSS 中，使⽤ @import 可能会产⽣以下警告：
css 复制代码
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

? 为什么会有这个警告？

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

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

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

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

? 如何复现这个警告？

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

_variables.scss
css 复制代码
$primary-color: blue;
style.scss
css 复制代码
@import 'variables';
body {
 background-color: $primary-color;
}
然后运⾏：
css 复制代码
sass style.scss style.css
你将看到 @import 相关的警告信息。

✅ 如何正确替换 @import ？

_variables.scss
css 复制代码
$primary-color: blue;
style.scss
css 复制代码
@use 'variables' as v;
body {
 background-color: v.$primary-color;
}
重新编辑后，警告消失

@import 的问题示例

1. 命名冲突

问题

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

_colors.scss
css 复制代码
$primary-color: blue;
_theme.scss
css 复制代码
$primary-color: red;
style.scss
css 复制代码
@import 'colors';
@import 'theme';
body {
 background-color: $primary-color;
}
结果

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

2. 重复导⼊

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

示例
_buttons.scss
css 复制代码
.button {
 padding: 10px;
 border-radius: 5px;
}
_components.scss
css 复制代码
@import 'buttons';
style.scss
css 复制代码
@import 'buttons';
@import 'components';
结果

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

3. 作⽤域问题

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

示例
_variables.scss
css 复制代码
$padding: 20px;
_card.scss
css 复制代码
@import 'variables';
.card {
 padding: $padding;
}
_button.scss
css 复制代码
@import 'variables';
.button {
 padding: $padding; // 可能需要不同的 padding，但被全局变量影响
}
由于变量是全局的，未来如果 variables.scss 修改 $padding ，所有引⽤的⽂件都会受影响，可能导致意外的样式变更。

✅@use 的优势

避免全局污染 ： @use 采⽤命名空间（如 v.$primary-color ），防⽌变量污染全局作⽤域。
避免重复导⼊ ： @use 只会导⼊⼀次，优化编译性能。
模块化管理：使⽤ @use 让代码更结构化，便于维护。

✅结论

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