更新 Vue3+Vite 脚手架后 Sass 出的一些 Warning

我在给乌蒙抽歌网页更新脚手架之后，发现 Sass 蹦了几个 Warning：

Deprecation [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

唉我去，我才更新的 1.80 你就给我说一个 2.0.0 要删一个 3.0.0 要删，那就看看啥玩意儿。

Legacy JS API

参考来源：https://stackoverflow.com/questions/78997907/the-legacy-js-api-is-deprecated-and-will-be-removed-in-dart-sass-2-0-0

这个好解决，在 Vite 的配置里面加一段：

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler' // 或 "modern"
      }
    }
  }
})

就可以了。然后我查了下 Vite 的文档，里面有提到：

如果安装了sass-embedded，默认为"modern-compiler"，否则为 "modern"

然后我又查了下，发现 这里写着：

Sass 团队为 Sass 维护了两个 Node.js 包，它们都支持 标准的 JavaScript API。该 sass 软件包 是纯 JavaScript，速度稍慢，但可以安装在 Node.js 支持的所有平台上。该 sass-embedded 软件包 围绕 Dart VM 包装了一个 JS API，因此速度更快，但仅支持 Windows、Mac OS 和 Linux。

那行吧，我装个 sass-embedded，但是换了之后也还是提示这个 Warining，那就先把配置加上就好了。

@import 警告

• @use 官方文档：https://sass-lang.com/documentation/at-rules/use/
• @forward 官方文档：https://sass-lang.com/documentation/at-rules/forward/
• @import 官方文档：https://sass-lang.com/documentation/breaking-changes/import/

我看了下文档，发现这个 @use API 在 1.23 就有了，但是仅 Dart Sass，放到 3.0.0 才废弃那估计是留给别的版本一段时间加进去吧。

基本上把 @import 替换成 @use 就差不了，然后在旧的变量里面加一下前缀。举个栗子：

// part/_preset.scss
$red: #f00;

// main.scss
// @import 写法
@import 'part/preset';
:root {
  --color-red: #{$red};
}

// @use 写法
@use 'part/preset';
:root {
  --color-red: #{preset.$red};
}

其实就类似于给了个 namespace 而已，很好理解的。所以也可以写成这样子：

// 重命名引用
@use 'part/preset' as color;
:root {
  --color-red: #{color.$red};
}

// 一股脑引用，就跟以前 @import 一样了
@use 'part/preset' as *;
:root {
  --color-red: #{$red};
}

别的建议看文档，我小项目基本就这点够了。