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’, // 修改api调用方式
  },
  },
  },
  …
  });

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 *;, // 导出全局变量和 mixin
  },
  },
  },
  …
  });