解决The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

前言

　　当我们要使用sass做一些炫酷的动画时候，需要用一些高阶语法例如random()以及加减乘除变量@for等等，但是sass版本过低会不支持我们的语法，在此记录下区分vue2和vue3引用sass。这里切记能用css做动效就尽量不要用js，渲染效果在越是复杂的动画就差别越大。

 

vue2

"sass": "~1.32.6",
"sass-loader": "^10.5.2",

此版本搭配calc会有影响。

 

vue3+vite+ts

"sass": "^1.81.0",
"sass-loader": "^16.0.3",

全局将@import改为@use，此版本支持calc。并配置vite.config.ts

css: {
      preprocessorOptions: {
        scss: {
          api: 'modern-compiler', // or 'modern'
        },
      },
    },