vue vite sass 报错处理 Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0

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

sass 1.80 不再支持 @import 需要使用 `@use’

Deprecation Warning on line 1, column 9 of srcAbout.vue:
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";
  │         ^^^^^^^^^^^^^^^^^^

@use "@/variables.scss";

2. Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.

sass 1.80 不再支持全局内置函数

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use string.slice instead.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
8 │   flex-direction: map-get($flex-fds, str-slice($str, 1, 1));
  │                                      ^^^^^^^^^^^^^^^^^^^^^
  ╵

npm install -g sass-migrator
$ sass-migrator module --migrate-deps YOUR-ENTRYPOINT.scss>

3. Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

sass 1.80 不再支持老的 js api 接口

Deprecation Warning: 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

• 修改方法 vue.config.js:

export default defineConfig({
  ...
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler', 
      },
    },
  },
  ...
});

4. Internal server error: [sass] Undefined variable.

sass 1.80 全局变量和 mixin 需要手动导出

14:20:18 [vite] Internal server error: [sass] Undefined variable.
   ╷
13 │   color: $color-blue;
   │          ^^^^^^^^^^^

14:18:52 [vite] Internal server error: [sass] Undefined mixin.
  ╷
6 │     @include func(css);
  │     ^^^^^^^^^^^^^^^

• 修改方法 vue.config.js:

export default defineConfig({
  ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/variables.scss" as *;`, 
      },
    },
  },
  ...
});