Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. More info and automated migrator: https://sass-lang.com/d/import ╷ 25 │ @import "~element-ui/packages/theme-chalk/src/index"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ stdin 25:9 root stylesheet Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. More info: https://sass-lang.com/d/legacy-js-api Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. More info and automated migrator: https://sass-lang.com/d/import ╷ 1 │ @import './variables.scss'; │ ^^^^^^^^^^^^^^^^^^ ╵ stdin 1:9 root stylesheet Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. More info and automated migrator: https://sass-lang.com/d/import ╷ 2 │ @import './mixin.scss'; │ ^^^^^^^^^^^^^^ ╵ stdin 2:9 root stylesheet

在 Dart Sass 3.0.0 中，`@import` 规则已经被弃用，并建议迁移到 `@use` 和 `@forward` 规则。这种变化旨在提供更好的模块化支持并避免命名冲突。 ### 解决方案 #### 使用 `@use` `@use` 是推荐的替代方式，用于导入其他 Sass 文件中的变量、混合宏（mixins）、函数等资源。它与 `@import` 的主要区别在于作用域和可访问性。 **示例：** ```scss // _variables.scss $primary-color: #007bff; // styles.scss @use 'variables'; body { background-color: variables.$primary-color; } ``` 通过 `@use` 导入的内容需要使用命名空间来访问其变量、函数或混合宏。如果希望自定义命名空间，可以使用 `as` 关键字： ```scss @use 'variables' as vars; body { background-color: vars.$primary-color; } ``` #### 使用 `@forward` 如果希望将一个文件的内容转发给另一个文件，以便消费者可以直接从转发后的文件中访问资源，则可以使用 `@forward`。 **示例：** ```scss // _theme.scss $theme-color: #28a745; // _index.scss @forward 'theme'; // styles.scss @use 'index'; body { color: index.$theme-color; } ``` 这样，`_index.scss` 转发了 `_theme.scss` 的内容，消费者只需导入 `_index.scss` 即可访问所有转发的内容。 #### 兼容性处理 如果你的项目依赖于旧版的 `@import` 语法，可以通过配置工具（如 Webpack 或 Vite）确保使用的是兼容版本的 Sass 编译器。例如，在 `package.json` 中指定使用 `sass`（即 Node Sass）而不是 `sass`（Dart Sass），但需要注意长期维护和支持的问题。 ```json "devDependencies": { "sass": "^1.32.0", // Node Sass 版本 "sass-loader": "^10.0.0" } ``` 对于仍然需要使用 `@import` 的第三方库，可以考虑临时保留这些依赖，同时逐步迁移自己的代码到新的 `@use` 和 `@forward` 语法。 #### 工具支持 一些构建工具和 IDE 插件已经开始支持自动检测并提示 `@import` 替换为 `@use`，这可以帮助开发者更轻松地进行迁移。例如，VSCode 的 Sass 插件可以在保存时自动重写 `@import` 语句为 `@use`。 --- ###