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

更改后的文件代码如下

坚持就是胜利✌️!

相关推荐
神毓逍遥kang10 分钟前
Drizzle-Orm + mysql + Nest 快速构建crud 体验下一代orm魅力
前端·后端
黑马王子1321 分钟前
React JSX(二)
前端
eason_fan22 分钟前
如何实现一个VSCode插件(Cygwin Terminal 插件实践)
前端·visual studio code
好青崧22 分钟前
三级联动制作总结
前端·javascript
Dignity_呱23 分钟前
大厂在用的css+js实现不等高瀑布流布局
前端·vue.js·面试
Sky重名了10494827 分钟前
npm link 使用指南
前端·npm
熊猫片沃子30 分钟前
使用nvm解决nodejs多版本问题,难道不香吗?
前端·npm·node.js
XW-ABAP30 分钟前
c语言练习4
java·c语言·前端
黑马王子1332 分钟前
最简单的Promise基础教程
前端
Aotman_34 分钟前
Vue 解决 Error: please transfer a valid prop path to form item!
前端·javascript·vue.js