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

版本号:

bash 复制代码
"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 一样直接使用导入的变量、函数和混合宏。

更改后的文件代码如下

坚持就是胜利✌️!

相关推荐
mayaairi2 分钟前
JS DOM与事件处理完全指南
服务器·前端·javascript
恋猫de小郭15 分钟前
Firebase 如何让全球 Android 和 Flutter 开发者集体 Build Fail
android·前端·flutter
墨白曦煜16 分钟前
智能体架构范式总结(React、Plan-And-Solve、Reflection)
前端·react.js·前端框架
qq_4260039619 分钟前
多语言新增语种全量测试策略的测试范围
前端·javascript·python·自动化
frjc30 分钟前
Node.js 与 npm 极简安装教程
前端·npm·node.js
IMPYLH31 分钟前
HTML 的 <main> 元素
前端·html
深念Y33 分钟前
微服务抽取路线图:从胖单体到 ARM 集群
前端·arm开发·数据库·后端·微服务·云原生·架构
雪芽蓝域zzs1 小时前
Vue3 + Vite本地模拟数据(读取 JSON 数据)
前端
亿元程序员1 小时前
还有高手?用Shader让图片中的3D圆环转起来!
前端
灯澜忆梦1 小时前
【基于GO的Web开发14】gin请求重定向
前端·后端·golang·gin