项目报@import错误，看这篇文章就够了！Sass1.80变革！！！

一、Sass1.80变革

Sass 中的 @import 指令虽然在其早期版本中扮演了重要角色，但随着项目复杂度的提升，其设计缺陷逐渐暴露：
1.作用域污染：@import 会将所有引入的文件内容直接合并到全局作用域中，这使得变量、函数和混入（mixin）的命名空间变得难以管理，增加了命名冲突的风险。
2.编译效率低下：由于 @import 支持嵌套导入，同一文件可能会被多次加载，这不仅增加了编译时间，还可能导致不必要的资源消耗，特别是在大型项目中这一问题尤为明显。
3.与 CSS 标准不兼容：虽然 CSS 也提供了 @import 规则，但其行为与 Sass 的实现存在显著差异，这种不一致性容易导致开发者混淆，增加了学习和使用的难度。
4.重复编译开销：由于 @import 允许嵌套导入，同一文件可能会被多次加载和编译，这不仅增加了编译时间，还导致了不必要的资源浪费，尤其是在大型项目中，这一问题会显著拖慢开发效率。
5.依赖关系复杂化：@import 的引入方式使得文件之间的依赖关系变得难以追踪和管理，尤其是在多层级嵌套导入的情况下，依赖链的复杂性会显著增加，给项目的维护和优化带来额外负担
这些局限性促使 Sass 团队在后续版本中引入了更现代化的模块系统（@use 和 @forward），以解决上述问题并提升开发体验，而且后续Sass还会弃用s内置的全局函数，不过官方表示不会再Sass 3.0.0移除 Sass 规则或全局内置函数

二、旧项目报错@import

1.旧项目启动后使用@import语法的大部分会遇见@import报错，这就是Sass1.80变革导致的

2.要解决上述办法需要把全局的@import换成@use，局部的换成@forward，可以看到下图中把全局导入的iframe使用@use，iframe.scss文件中的导入使用了@forward，再次运行项目@import报错已经消失。@forward和@use这两个区别后面会讲解到

3.如出现下图警告，可在vite.config中的scss加入：api: ‘modern-compiler’、silenceDeprecations: [‘legacy-js-api’]配置，这是因为后面的sass版本会废弃旧的JS API，低版本的vite会有此警告，也可更新到最新的vite解决该警告

#三、@use 和 @forward的区别
@use 用于加载其他模块，并将其成员引入当前作用域，@forward 的主要功能是将一个模块的成员（如变量、函数、混入等）转发到另一个模块中，而不会直接加载或编译这些文件。

1. @use 具有以下特点：

• 作用域隔离：每个模块的成员默认是私有的，需要通过命名空间访问，避免了全局作用域的污染。
• 按需加载：只有在使用时才会加载模块，减少了不必要的编译开销。
• 命名空间管理：可以通过 as 关键字为模块指定别名，避免命名冲突。

2. forward 具有以下特点

• 模块聚合：可以将多个模块的成员集中到一个模块中，方便统一管理和使用。
• 依赖隐藏：转发模块的成员时，不会暴露其内部依赖，保持了模块的封装性。
• 灵活配置：可以通过 show 和 hide 关键字选择性地转发特定成员，进一步控制模块的对外接口。
  上面代码把iframe中的@import，改成@forward，就是因为@use的作用域隔离，如果换成@use，那么scss变量不会加入到全局，只能在局部生效，可以看到已经报错$primary-color
  

四、@use使用方法

1.@use可以用在某个模块、某个页面、某个组件单独定义的scss，使用@use导入scss文件，使用文件名访问变量

2.使用@use as 导入文件内的所有scss变量

3.使用@use with修改scss变量，修改的变量必须是!default标记的，也可使用 @use as * with

五、@forward使用方法

1.使用@forward with修改scss变量

2.使用@forward show导入部分变量，导入多个变量使用逗号分开

3.使用@forward hide排除部分变量，排除多个变量使用逗号分开

4.@forward导入scss，如果不同文件内存在相同变量，会报错