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

更改后的文件代码如下

坚持就是胜利✌️!

相关推荐
breeze jiang15 小时前
React useRef 实战:从 input 聚焦到 Web Worker 引用
前端·javascript·react.js
90后的晨仔15 小时前
uni-app 生命周期深度解析(iOS / Android / 鸿蒙 / Vue3 四端对照)
前端
钛态17 小时前
AI 辅助:前端框架反模式:过度封装、状态滥用与副作用失控
前端·vue·react·web
by__csdn17 小时前
Vue vs React vs Angular:前端框架终极对决
前端·vue.js·react.js·前端框架·vue·react·angular
钛态17 小时前
前端框架选型决策框架:React、Vue、Svelte、Solid 的 2026 年横评
前端·vue·react·web
反正我还没长大17 小时前
Vue3响应式原理深度解析:揭秘现代前端框架的核心引擎
vue.js·前端框架·vue·proxy模式
2501_9261028617 小时前
深入浅出Vue.js前端框架设计:核心原理与实践指南
前端·vue.js·前端框架
程序员黑豆18 小时前
使用AI编程开发鸿蒙应用:从环境搭建到实战示例
前端·harmonyos
程序员黑豆21 小时前
鸿蒙应用开发:一次开发多端部署之响应式布局完全指南
前端·harmonyos
小月土星1 天前
2.0 React Router 前端路由深度解析:从传统后端路由到现代 SPA 的完整演进
前端