解决 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 一样直接使用导入的变量、函数和混合宏。

更改后的文件代码如下

坚持就是胜利✌️!

相关推荐
90后的晨仔12 分钟前
👂《侦听器(watch)》— 监听数据变化执行副作用逻辑
前端·vue.js
曾经的三心草13 分钟前
微服务的编程测评系统6-管理员登录前端-前端路由优化
前端·微服务·状态模式
Point25 分钟前
[LeetCode] 最长连续序列
前端·javascript·算法
rookiesx29 分钟前
安装本地python文件到site-packages
开发语言·前端·python
支撑前端荣耀30 分钟前
九、把异常当回事,代码才靠谱
前端
LotteChar38 分钟前
HTML:从 “小白” 到 “标签侠” 的修炼手册
前端·html
趣多多代言人40 分钟前
20分钟学会TypeScript
前端·javascript·typescript
90后的晨仔40 分钟前
⚙️ 《响应式原理》— Vue 是怎么做到自动更新的?
前端·vue.js
结城40 分钟前
深入掌握CSS Grid布局:每个属性详解与实战示例
前端·css
寒..1 小时前
网络安全第三次作业
前端·css·html