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

最新推荐文章于 2025-04-10 17:42:49 发布
最新推荐文章于 2025-04-10 17:42:49 发布
阅读量2.5k 收藏 10
点赞数 8
CC 4.0 BY-SA版权
文章标签： vue.js npm javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/aiweb_kai/article/details/136248210
当遇到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学习】使用 “scss” 时报错‘ vue-style-loader css-loader
java_dazhuzhu的博客
05-01 943
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记。
记录vite引入sass预编译报错error during build: [vite:css] [sass] Undefined variable.问题
weixin_43073383的博客
03-28 950
必须把"sass":降到 v"1.69.5",然后vite和页面引入的scss 都改为import**加粗样式
解决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 1068
变量可能在某些条件下才被定义，但在这些条件不满足的情况下脚本仍试图访问该变量。
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 6750
才正常解决了上述的问题。具体解决方案如下所示。尝试了下面这篇博客的方法。
Syntax Error: SassError: Undefined variable: “$color-primary“.
yangbinling的博客
12-06 4845
引入‘$color-primary’后报错修改vue.config.js代码即可原代码：
SassError: Undefined variable: “$u-bg-color“.
先行网络技术
12-14 357
最后：如果你还是在使用uview插件运行小程序时报错，那么你需要进行着最后一步，即在项目根目录的uni.scss文件中引入uview的scss，最好放在第一行。注意：两个插件都要装；这些问题我之前我之前有遇到过，并且也已经做了笔记，俗话说的好，好记性不如烂笔头。原因：sass没有安装，这边建议全局安装。解决方案：安装sass👇。
Vue引入scss文件报错 Syntax Error: SassError: Undefined variable.23 │ $b-custom-radio-indicator-border-rad
手撕鸡翅的博客
08-28 9483
错误如下：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 9506
uniapp 中出现 Undefined variable $u-type-primary-light 问题
vue项目使用的是sass打包报错
m0_54570434的博客
12-20 597
变换为。
vue如何引入sass全局变量
12-12
sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错误，其他的样式可以正常显示，显然是编译的问题。 傻瓜式引用 在每个用到全局变量的组件都引入该全局样式文件 @import 'path/fileName.scss' 但是组件或者页面不在统一层目录下，引入的路径可能也会有差异，所以还是看看 sass-resources-loader 的解决方法吧。 sass-r
sass报错：[sass] Undefined variable. @import升级@use语法注意事项
莫循的AI编程博客
02-17 1168
这里我踩了一个坑找半天的问题，原因是sass升级到1.85之后 定义变量前加上 - 就是表示变量私有，即使使用@use导出。今天创建vue3项目，迁移老项目代码，使用sass的时候发现@import语法已经废弃，官方推荐使用@use替换。这里去掉test前的-，就可以正常访问变量。在新的scss文件里也是访问不到的。
vue3+vite+ts：报错 [sass] undefined variable
qq_50386946的博客
07-12 9312
2、不要在 【main.ts】中全局引入，直接在【vite.config.ts】中处理。1、安装 sass-loader ：npm i sass-loader@10 -D。
vue中引入sass
ken_ding的博客
11-15 1607
1.安装sass依赖包1.1npm install –save-dev sass-loader //sass-loader依赖于node-sass 1.2npm install –save-dev node-sass2.在build文件夹下webpack.base.conf.js的rules里面添加配置{ test: /.sass$/, loaders: [‘style’, ‘css
scss全局变量配置
科科的博客
11-29 2182
今天想在项目中，使用一个全局生效的自定义scss变量。看看整个项目的scss引入，创建了一个main.scss文件，然后在main.js中导入了。
element Pre-transform error: [sass] Undefined function. ╷ 53 │ #{color.channel($color, ‘red‘
wuyinmingyue的博客
11-25 1823
报错 .pnpm\element-plus@2.8.8_vue@3.5.13_typescript@5.6.3_\node_modules\element-plus\theme-chalk\src\mixins\_var.scss:53:7 Error: Undefined function. ╷ 53 │ #{color.channel($color, 'red'), │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ nod
vue3项目中配置sass，vite报错Undefined mixin
qq_41419473的博客
07-06 7728
vite报错 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xYN55E4l-1657111448095)(https://upload-images.jianshu.io/upload_images/20274104-a35eeb8fa53c8afa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]是因为scss的内置语法需要预编译。在vite.config.ts配置tscss: { preprocessorO
解决 vite.config.ts 引入scss 预处理报错
最新发布
When you can't win by being better, you can win by being different.
04-10 904
为什么一定要使用src别名？
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
<think>好的，我现在需要帮助用户解决在使用Vue CLI和uni-app时遇到的Sass变量未定义的构建错误。用户提到了错误信息是“HookWebpackError SassError Undefined variable $common-bg-color”，并且是在vue-cli-plugin-uni和sass-loader的环境下出现的。 首先，我要确定问题的主要原因。根据错误提示，变量$common-bg-color未定义，这说明在某个Sass文件中使用了这个变量，但Sass编译器找不到它的定义。常见的情况可能有： 1. **变量未正确引入**：用户可能在某个组件或样式中使用了变量，但忘记在对应的文件中定义或通过@import引入包含该变量的文件。 2. **路径配置错误**：当使用sass-loader的additionalData选项自动注入变量时，路径可能不正确，导致变量未被正确加载。 3. **版本兼容性问题**：用户安装的sass-loader或相关依赖版本可能与当前配置不兼容，例如选项名称变更（如prependData代替additionalData）。 接下来，我需要参考用户提供的引用内容来寻找线索。根据引用[2]，提到Sass Loader的选项对象中有一个未知属性‘additionalData’，而有效的属性包括prependData。这说明用户可能在配置sass-loader时错误地使用了additionalData，而应使用prependData。特别是如果用户使用的sass-loader版本较新，可能已经不再支持additionalData这个选项名，导致配置错误，进而使得变量注入失败，最终引发变量未定义的错误。 另外，引用[3]中展示了在.vue文件中正确使用Sass变量的例子，用户可能需要确保在样式部分正确引入变量文件。引用[4]提到安装node-sass和sass-loader，可能用户的环境中存在依赖安装问题，但根据错误提示，更可能的是配置问题。 解决方案的步骤可能包括： 1. **检查变量定义位置**：确保$common-bg-color在某个Sass文件中正确定义，并确认该文件被正确引入到使用它的组件中。 2. **配置sass-loader自动注入变量**：在vue.config.js中配置sass-loader的prependData选项，将变量文件全局引入。但需要注意选项名称是否正确，根据引用[2]，应使用prependData而不是additionalData。 3. **验证依赖版本**：检查sass-loader和node-sass的版本是否兼容，必要时调整版本或选项名称。 4. **重启构建过程**：在修改配置后，清除缓存并重新构建，确保更改生效。 此外，用户可能在使用uni-ui框架，需要确认是否需要额外的配置步骤，例如引用[4]提到的安装步骤是否完整，但根据当前错误，主要问题还是变量注入的配置。 可能的陷阱包括：路径错误导致变量文件未被正确加载，或者配置选项名称错误导致注入失败。需要用户仔细检查vue.config.js中的sass-loader配置，确保路径正确且选项名称正确。 最后，生成相关问题时应围绕Sass变量处理、sass-loader配置以及uni-app中的样式问题展开，帮助用户进一步排查可能的其他问题。</think>### 解决方案：Sass变量未定义导致的构建失败问题 #### 1. 确认变量定义位置 首先检查项目中是否存在定义 `$common-bg-color` 的全局Sass变量文件（例如 `variables.scss`）。若未定义，需在文件中添加： ```scss // src/styles/variables.scss $common-bg-color: #ffffff; // 根据实际需求赋值 ``` #### 2. 配置全局注入变量（关键步骤） 在 `vue.config.js` 中通过 `sass-loader` 的 `prependData` 选项自动注入变量文件。**注意避免使用已弃用的 `additionalData`**，根据引用[^2]需改为 `prependData`： ```javascript // vue.config.js module.exports = { css: { loaderOptions: { scss: { prependData: `@import "@/styles/variables.scss";` // 路径根据项目实际结构调整 } } } }; ``` #### 3. 检查依赖版本兼容性 - 确保 `sass-loader` 版本与配置兼容。若使用 `sass-loader@^10.x`，`prependData` 是有效选项；若版本过低（如v7），则需改用 `data`。 - 检查依赖安装是否完整： ```bash npm install sass-loader node-sass -D ``` #### 4. 验证组件中变量使用 在 `.vue` 文件中直接使用变量时无需重复引入（已全局注入）： ```vue <style lang="scss" scoped> .container { background-color: $common-bg-color; } </style> ``` #### 5. 清除缓存并重新构建 ```bash npm run serve -- --reset-cache # 或 npm run build -- --reset-cache ``` #### 常见错误排查 - **路径错误**：使用 `@/` 需确保Webpack别名配置正确。 - **变量拼写错误**：检查变量名是否与定义完全一致。 - **Sass语法错误**：确保变量文件无其他语法错误。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值