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

更改后的文件代码如下

坚持就是胜利✌️!

相关推荐
GIS之路21 小时前
GDAL 创建矢量图层的两种方式
前端
小目标一个亿1 天前
Windows平台Nginx配置web账号密码验证
linux·前端·nginx
rocky1911 天前
网页版时钟
前端·javascript·html
Aotman_1 天前
Element-UI Message Box弹窗 使用$confirm方法自定义模版内容,修改默认样式
linux·运维·前端
计算机程序设计小李同学1 天前
基于SSM框架的动画制作及分享网站设计
java·前端·后端·学习·ssm
一只小阿乐1 天前
vue-web端实现图片懒加载的方
前端·javascript·vue.js
牛马1111 天前
Flutter 多语言
前端·flutter
by————组态1 天前
集成详细说明
前端·物联网·信息可视化·组态·组态软件
我是小疯子661 天前
jQuery快速入门指南
前端
傻啦嘿哟1 天前
Python中的@property:优雅控制类成员访问的魔法
前端·数据库·python