vue 打包时报错 Syntax Error: SassError: Undefined variable. ╷ 314 $sideBarWidth或者 @import “@/variables.

最新推荐文章于 2025-03-28 13:37:55 发布
原创 最新推荐文章于 2025-03-28 13:37:55 发布 · 2.5k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #npm #javascript

当遇到Vue打包报错涉及$sideBarWidth和变量导入时，可能是由于sass-loader版本问题。解决需配置vue.config.js以支持scss变量，同时注意node-sass版本对应loader选项的变化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue打包时报错     $sideBarWidth或者 @import "@/variables.

产生原因可能是因为sass-loader 版本过高，config 配置发生变化

解决方法：

配置vue.config.js文件，使得全局都能使用scss变量，但是node版本对应的node-sass版本也不同,请选择对应的node-sass版本

sass-loader v8
该 data 选项已重命名为 prependData 选项

sass-loader v9.0
prependData 选项已被删除，取而代之的是 additionalData 选项

node-sass对应的sass-loader版本也不同

aiweb_kai
关注
Vue源码分析——第三章
Lee的博客
09-10 718
Vue源码分析——第一章 Vue源码分析——第二章 // only used in dev mode //检测 val必需是数字 function checkDuration(val, name, vnode) { if (typeof val !== 'number') { warn( "<transition> explicit " + name + " duration is not a valid number - " + "got " + ...
【Web系列二十八】代码规范校验
Nicholson的博客
03-21 440
优秀的开发者一定是对代码整洁和规范有要求的，但开发时难免会有疏漏的地方，因此代码规范校验工具是必不可少的。本文将介绍不同的Web开发平台的代码规范校验工具和示例。
解决Vue在main.js全局引入scss文件，组件里使用scss变量报错问题
qq_40532145的博客
09-09 2万+
报错：Syntax Error: SassError: Undefined variable. 我一开始的引入方式是这样的： 以为在main.js全局引入了就一劳永逸，写着常规css样式时还好好的，用到scss变量时就报错了。· 解决方法一 在需要用到的 .vue 文件里单独引用 variable.scss 变量文件，but达不到我们想要的“一劳永逸“效果 可能还会有奇奇怪怪的潜在问题，建议使用方法二。 · 解决方法二 配置vue.config.js文件，使得全局都能使用sc...
【shell编程】报错信息：Undefined Variable（包含6种解决方法）
摇光是颗星
01-04 1078
变量可能在某些条件下才被定义，但在这些条件不满足的情况下脚本仍试图访问该变量。
【Vue学习】使用 “scss” 时报错‘ vue-style-loader css-loader
java_dazhuzhu的博客
05-01 945
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记。
Syntax Error: SassError: Undefined variable. ╷ 314 │ color: $u-primary； │
weixin_44563526的博客
04-27 1万+
项目场景： 使用Uni-app创建文件并使用Uview引用scss报错 问题描述 安装sass后 启动会报 找不到这个东西 原因分析： 1.可能是配置全局引用没有完整 查看自己是否全局引用完整 1.安装依赖 // 安装sass npm i sass -D // 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错 npm i sass-loader@10 -D 2.安装uview-ui npm install uview-ui 默认版本为1.X 官网默认打开
SassError: Undefined variable: “$u-border-color“问题解决
qq_45366264的博客
08-09 6764
才正常解决了上述的问题。具体解决方案如下所示。尝试了下面这篇博客的方法。
Syntax Error: SassError: Undefined variable: “$color-primary“.
yangbinling的博客
12-06 4848
引入‘$color-primary’后报错修改vue.config.js代码即可原代码：
SassError: Undefined variable: “$u-bg-color“.
先行网络技术
12-14 360
最后：如果你还是在使用uview插件运行小程序时报错，那么你需要进行着最后一步，即在项目根目录的uni.scss文件中引入uview的scss，最好放在第一行。注意：两个插件都要装；这些问题我之前我之前有遇到过，并且也已经做了笔记，俗话说的好，好记性不如烂笔头。原因：sass没有安装，这边建议全局安装。解决方案：安装sass👇。
Syntax Error: HookWebpackError: Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js): SassError: Undefined variable. ╷ 246 │ background-color: $common-bg-color; │ ^^^^^^^^^^^^^^^^
03-25
用户提到了错误信息是“HookWebpackError SassError Undefined variable $common-bg-color”，并且是在vue-cli-plugin-uni和sass-loader的环境下出现的。 首先，我要确定问题的主要原因。根据错误提示，变量$common...
ecw2c理解元数据：使用BigQuery k-means将4,000个堆栈溢出标签聚类
热门推荐
cunehu1722的博客
07-24 6万+
您如何将超过4,000个活动的Stack Overflow标签分组为有意义的组？ 对于无监督学习和k均值聚类来说，这是一项完美的任务-现在您可以在BigQuery中完成所有这些工作。 让我们找出方法。 Visualizing a universe of clustered tags. Felipe Hoffais a Developer Advocate fo...
vue如何引入sass全局变量
12-12
sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错误，其他的样式可以正常显示，显然是编译的问题。 傻瓜式引用 在每个用到全局变量的组件都引入该全局样式文件 @import 'path/fileName.scss' 但是组件或者页面不在统一层目录下，引入的路径可能也会有差异，所以还是看看 sass-resources-loader 的解决方法吧。 sass-r
在vite.config.js要怎么写
最新发布
04-03
additionalData: `@import "./src/styles/global.less";` } }, postcss: { parser: 'postcss-less', plugins: [ tailwind(), autoprefixer({ grid: 'autoplace' }) ] } } }) ``` 配置完成后，可通过...
Vue引入scss文件报错 Syntax Error: SassError: Undefined variable.23 │ $b-custom-radio-indicator-border-rad
手撕鸡翅的博客
08-28 9484
错误如下：scss编译错误 error in ./src/assets/scss/index.scss Syntax Error: SassError: Undefined variable. ╷ 23 │ $b-custom-radio-indicator-border-radius-lg: $custom-radio-indicator-border-radius !default; │ ^^^^^
使用uview-ui遇见SassError: Undefined variable
zhaohonghaofly的博客
03-03 9509
uniapp 中出现 Undefined variable $u-type-primary-light 问题
vue项目使用的是sass打包报错
m0_54570434的博客
12-20 597
变换为。
sass报错：[sass] Undefined variable. @import升级@use语法注意事项
莫循的AI编程博客
02-17 1176
这里我踩了一个坑找半天的问题，原因是sass升级到1.85之后 定义变量前加上 - 就是表示变量私有，即使使用@use导出。今天创建vue3项目，迁移老项目代码，使用sass的时候发现@import语法已经废弃，官方推荐使用@use替换。这里去掉test前的-，就可以正常访问变量。在新的scss文件里也是访问不到的。
记录vite引入sass预编译报错error during build: [vite:css] [sass] Undefined variable.问题
weixin_43073383的博客
03-28 956
必须把"sass":降到 v"1.69.5",然后vite和页面引入的scss 都改为import**加粗样式
vue3+vite+ts：报错 [sass] undefined variable
qq_50386946的博客
07-12 9323
2、不要在 【main.ts】中全局引入，直接在【vite.config.ts】中处理。1、安装 sass-loader ：npm i sass-loader@10 -D。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值