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

### 关于 Sass @import 规则被弃用及其解决方案

#### Sass @import 规则的弃用情况
Sass @import 规则已被标记为过时，并将在 Dart Sass 3.0.0 版本中移除[^1]。这意味着开发者应尽快迁移现有项目中的 @import 使用方式，以确保未来版本兼容性和代码稳定性。

#### 迁移到现代编译器 API 的方法
为了适应这一变化，在构建工具配置文件（如 vite.config.js 或 nuxt.config.ts）中可以调整预处理器选项来采用新的 `@use` 和 `@forward` 指令替代旧版的 `@import` 。具体来说：

对于 Vite 构建环境下的 SCSS 文件处理，可以在 `vite.config.js` 中设置如下参数：

css: {
    preprocessorOptions: {
        scss: {
            api: 'modern-compiler',
            additionalData: `@use "${resolve(__dirname, 'src/styles/variables.scss')}" as *;`,
        },
    },
},

而对于基于 Nuxt3 的应用，则需编辑 `nuxt.config.ts` 并加入相应的配置项：

export default defineNuxtConfig({
  css: [
    '~/assets/css/main.css'
  ],
  build: {
    loaders: {
      sass: {
        implementation: require('sass'),
        sassOptions: {
          api: 'modern-compiler', // or simply use 'modern'
        }
      }
    }
  }
})

通过上述更改，不仅解决了控制台警告问题，还使得项目的样式管理更加符合当前的最佳实践标准[^2][^3]。