用 Sass 模块化系统取代全局导入，消除 1.80.0 引入的 @import 弃用警告

前端贾公子

已于 2024-12-12 13:14:11 修改

阅读量5.4k

点赞数 32

文章标签： sass 前端 css

于 2024-12-12 11:56:43 首次发布

本文链接：https://blog.csdn.net/qq_63358859/article/details/144421789

版权

前言

最初，Sass 使用 @import 规则通过单个全局命名空间加载其他文件，所有内置函数也可全局使用。由于模块系统（@use 和 @forward 规则）已经推出多年，我们现已弃用 Sass @import 规则和全局内置函数。

@import 会导致许多问题，需要手动为 Sass 成员指定命名空间以避免冲突，当多次导入同一个文件时会减慢编译速度，并且使人类和工具都很难分辨给定变量、混合或函数来自何处。

模块系统修复了这些问题，并使 Sass 的模块化与其他现代语言的最佳实践相媲美，但只要 @import 仍保留在语言中，我们就无法获得它的全部好处。

@import 现在从 Dart Sass 1.80.0 开始已弃用。此外，我们还将弃用 sass: 模块中可用的 Sass 内置函数的全局版本。

问题

将 Sass 升级到 1.80.0 及以上版本后，你可能会遇到如下警告：

WARN  Dart Sass: [file].scss:[line]:8: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

该警告表示 @import 规则已被弃用，并且将在 Sass 3.0.0 版本中移除。这看上去很宽容，毕竟 Sass 2.0 还未发布呢。但实际上取代 @import 的现代化方案已经推出好几年了，可它仍然被广泛使用。这大概就是 Sass 在 2.0 之前就弃用它的原因吧。

这个警告是值得修正的，消除它的正面效果绝不仅是清理碍眼的输出。

`@import` 的缺陷

命名冲突

假设我们有以下三个 SCSS 文件：

// file1.scss
$color: blue;
@mixin button {
  // button styles
}

// file2.scss
$color: red; // 会覆盖 file1 的 $color
@mixin button {
  // 会覆盖 file1 的 button
  // different button styles
}

// main.scss
@import "file1";
@import "file2";
// 此时 $color 是 red, button mixin 是 file2 的版本

如上代码中的注释所示，@import 导致了命名冲突。因为