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

更改后的文件代码如下

坚持就是胜利✌️!

相关推荐
谭光志13 小时前
Vibe Coding 时代,程序员该何去何从
前端·后端·ai编程
仿生狮子15 小时前
别再说“全栈”了,AI 时代团队只认这 5 种人
前端·人工智能·后端
kyriewen15 小时前
AI 写的 React 组件,合并前必查的 6 个坏味道——每个都有代码对比
前端·javascript·react.js
Highcharts.js15 小时前
软件开发公司为什么选择 Highcharts?
前端·前端框架·echarts·数据可视化·技术选型·highcharts·图表工具
阿祖zu16 小时前
企业 AI 转型之痛,个人提效十倍不止,组织效率仍止步不前?
前端·aigc·agent
摇滚侠17 小时前
SpringBoot3+Vue3 全套视频教程 45-51
前端·javascript·vue.js
酸梅果茶18 小时前
【6】lightning_lm项目-LIO 前端 -点云预处理模块
前端·slam
Hilaku18 小时前
前端大裁员背后的恐慌:我们还剩什么底牌?
前端·javascript·程序员
咖啡无伴侣18 小时前
unplugin-auto-import 使用详解+面试高频考点
前端·架构
搬砖记录员19 小时前
录屏文件打不开?H.265兼容性踩坑与4种实战方案
前端