Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0

### 关于 Sass @import 规则弃用

Sass 社区宣布将在 Dart Sass 3.0.0 版本中移除 `@import` 规则，这一变化旨在推动更现代的模块化实践并简化编译过程[^1]。

#### 弃用原因与影响

随着前端开发工具链的发展，特别是像 Webpack 和 Vite 这样的构建工具逐渐普及，传统的 `@import` 方式暴露出一些局限性和性能问题。为了适应新的需求和发展趋势，Sass 开发团队决定逐步淘汰旧有的导入机制，转而推荐使用更加灵活高效的替代方案[^2]。

#### 应对措施及解决方案

对于现有项目遇到此类警告的情况，建议采取如下调整：

##### 使用 `@use` 或者 `@forward`

- **替换语法**：将所有的 `@import "file";` 改写成 `@use "file"` 或者根据具体场景考虑是否适合采用 `@forward`。

  // 原始写法
  @import 'reset';
  @import 'variables';

  // 新写法
  @use './reset';
  @use './variables';

- **作用域管理**：通过 `as *` 来引入所有公共成员到当前命名空间下；也可以指定特定名称来访问被使用的样式表中的内容。

  @use "./styles/variables" as vars;
  body {
    color: vars.$primary-color;
  }

##### 更新配置文件 (针对不同框架)

根据不同环境下的实际应用情况，在项目的配置文件里做出相应更改可以有效解决问题。例如在基于 Vue 和 Vite 的环境中可以通过修改 `vite.config.js` 文件实现兼容性支持[^3]:

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "${resolve(__dirname, 'src/styles/variables.scss')}" as *;`,
      },
    },
  },
});

而对于 Nuxt3 用户，则可以在 `nuxt.config.ts` 中加入类似的设置项以消除该类错误提示[^4]:

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          api: 'modern-compiler',
        },
      },
    },
  },
})