记录sass版本太高报错问题

vue2升级vue3的时候，vue2项目之前 sass 用的是 @import 写法，升级vue3后启动会报错：

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

  ╷
3 │           @import '@/assets/styles/mixin.scss';
  │                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    src\components\Contextmenu\MenuContent.vue 3:19  root stylesheet

错误是由于 Sass 的 @import 规则已经被弃用，并且在 Dart Sass 3.0.0 中将被移除。为了避免未来的问题，建议你迁移到 @use 和 @forward 规则，它们是 Sass 推荐的方式。

解决方案：

1.  使用 @use 替代 @import 
 @use 可以导入模块，并自动为模块中的变量、混合、函数提供命名空间。推荐使用 @use 替代 @import。

2. 修改 vite.config.js 中的配置

export default defineConfig({
  plugins: [
    vue(),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use '@/assets/styles/variable' as *;
          @use '@/assets/styles/mixin' as *; `,  // scss的文件
      },
    },
  },
});