解决 vite.config.ts 引入scss 预处理报错

版本号：

"sass": "^1.86.3",

"sass-loader": "^16.0.5",

"vite": "^6.2.0"

报错1：[plugin:vite:css] [SASS] Error：Can't find stylesheet to import

vite.config.ts 开始文件错误

修改之后：完美解决报错（不过我还没搞懂为什么一定要使用src别名？？？）

注意⚠️：新版引入需要使用@use

在 Sass 中，@use 规则用于加载另一个样式表，并将其内容作为模块导入。

与 @import 不同，@use 规则会创建一个命名空间，以避免变量、函数和混合宏的命名冲突。

报错2：[plugin:vite:css] [sass] Error: Undefined variable

明明正确配置，也正确使用了，还是报错变量未定义

开始APP.vue文件如下：

解决：修改APP.vue文件之后如下：

不可能我的每一个全局变量都要使用这个variable.前缀吧？可以如下继续更改

每一个引入scss文件的位置都要加一个 as *

as * 的作用是将导入的模块内容直接暴露在当前样式表的命名空间中，这样你就可以像使用 @import 一样直接使用导入的变量、函数和混合宏。

更改后的文件代码如下

坚持就是胜利✌️！