vue vite sass 报错处理 Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0_global built-in functions are deprecated and will
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 src\\About.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 }, }, }, ...});
