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

最新推荐文章于 2025-03-28 13:37:55 发布
原创 最新推荐文章于 2025-03-28 13:37:55 发布 · 2.8k 阅读 · 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选项的变化。

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
关注
Sass报错“Undefined variable“？全局变量的模块化导出方案
shejizuopin的博客
11-06 899
摘要：本文针对Sass开发中常见的"Undefined variable"报错问题，系统分析了5种典型错误场景（变量未定义、文件未引入、命名空间冲突等），并提出了3种跨框架解决方案：基于Vite的全局注入方案（推荐）、CSS Modules局部导出方案和Webpack传统项目方案。通过变量分层管理、模块化导出配置和实际案例演示，帮助开发者有效解决Sass变量作用域问题，同时提供调试技巧和最佳实践建议，适合Vue3、React等现代前端项目使用。
Sass报错“Undefined mixin“？导入路径的相对与绝对规则
最新发布
shejizuopin的博客
10-13 654
Sass路径问题解决方案：相对与绝对路径最佳实践 本文针对Sass开发中常见的"Undefined mixin"错误，深入分析了路径配置错误的原因，并提供了系统的解决方案。主要内容包括： 错误分析：总结四种常见错误类型（路径错误、导入顺序错误、作用域限制、文件类型错误） 路径应用： 相对路径规范与示例 绝对路径配置方案（Vite/Webpack项目） 解决方案：提供五种实用方案矩阵，包括命名空间、全局暴露、主文件聚合等 调试方法：介绍Sass调试工具和渐进式排查流程 最佳实践：推荐文件结
SassError: Undefined variable: “$u-border-color“问题解决
qq_45366264的博客
08-09 7271
才正常解决了上述的问题。具体解决方案如下所示。尝试了下面这篇博客的方法。
scss使用mixin不生效(浏览器无法编译出来)的解决方法
12-14
mixin方法： 浏览器无法编译： 以前旧版sass是支持上面写法，现在新版后不支持，传入变量必须加#{}编译 浏览器编译：
vue如何引入sass全局变量
12-12
sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错误，其他的样式可以正常显示，显然是编译的问题。 傻瓜式引用 在每个用到全局变量的组件都引入该全局样式文件 @import 'path/fileName.scss' 但是组件或者页面不在统一层目录下，引入的路径可能也会有差异，所以还是看看 sass-resources-loader 的解决方法吧。 sass-r
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-bg-color“.
先行网络技术
12-14 433
最后：如果你还是在使用uview插件运行小程序时报错，那么你需要进行着最后一步，即在项目根目录的uni.scss文件中引入uview的scss，最好放在第一行。注意：两个插件都要装；这些问题我之前我之前有遇到过，并且也已经做了笔记，俗话说的好，好记性不如烂笔头。原因：sass没有安装，这边建议全局安装。解决方案：安装sass👇。
error in ./src/assets/styles/index.scss Syntax Error: SassError: Undefined variable. ╷ 17 │ @include colorBtn($blue) │ ^^^^^ ╵ src\assets\styles\btn.scss 17:21 @import src\assets\styles\index.scss 6:9 root stylesheet @ ./src/assets/styles/index.scss 4:14-234 15:3-20:5 16:22-242 @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.1.15:80&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
09-29
SassError: Undefined variable. ╷ 17 │ @include colorBtn($blue) │ ^^^^^ ╵ src\assets\styles\btn.scss 17:21 @import src\assets\styles\index.scss 6:9 root stylesheet ``` --- ### ❌ 错误原因...
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...
Why you should do it regularly: https://github.com/browserslist/update-db#readme98% after emitting copyPlugin ERROR Failed to compile with 2 errors error in ./src/page/create.vue?vue&type=style&index=0&id=204a699a&lang=scss&scoped-true& Syntax Error: background-image: url(#{$app-path}/ing/nav-menu-img.png); Undefined variable. 22 background-image: url(#{$app-path}/img/nav-menu-img.png); Λ^^^AA src\styles\list.scss 22:33 @import
08-01
在 Vue 项目中使用 SCSS 样式文件时，如果尝试通过变量动态引入图片路径，例如 `url(#{$app-path})`，可能会遇到 `Undefined variable` 错误。这通常是因为 SCSS 变量作用域或路径配置问题导致的。 ### 原因分析 ...
<template> <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground, }" > <logo v-if="showLogo" :collapse="isCollapse" /> <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color=" settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground " :text-color=" settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor " :unique-opened="true" :active-text-color="settings.theme" :collapse-transition="false" mode="vertical" > <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" /> </el-menu> </el-scrollbar> </div> </template> <script> import { mapGetters, mapState } from "vuex"; import Logo from "./Logo"; import SidebarItem from "./SidebarItem"; import variables from "@/assets/styles/variables.scss"; export default { components: { SidebarItem, Logo }, computed: { ...mapState(["settings"]), ...mapGetters(["sidebarRouters", "sidebar"]), activeMenu() { const route = this.$route; const { meta, path } = route; // if set path, the sidebar will highlight the path you set if (meta.activeMenu) { return meta.activeMenu; } return path; }, showLogo() { return this.$store.state.settings.sidebarLogo; }, variables() { return variables; }, isCollapse() { return !this.sidebar.opened; }, }, }; </script> <style scoped lang="scss"> // ================================================================ // 🌟 悬浮 & 点击特效：霓虹流动 + 发光扩散 // ================================================================ .el-menu--vertical { background: $base-menu-background !important; border-right: none; overflow: hidden; padding: 10px 0; .el-menu-item, .el-submenu__title { color: $base-menu-color; height: 50px !important; line-height: 50px !important; font-size: 14px; font-weight: 500; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); margin: 6px 8px; border-radius: 12px; position: relative; overflow: hidden; background: transparent; // 默认内边距 padding-left: 20px !important; // 💫 Hover 悬浮特效 &:hover { color: #ffffff !important; background: $base-sub-menu-hover !important; transform: translateX(4px); box-shadow: 0 4px 16px rgba(42, 74, 128, 0.35); } // 🔆 激活状态：发光边框 + 扩散光晕 &.is-active { color: #ffffff !important; background: $base-sub-menu-hover !important; border: 1px solid #5d8bfb; box-shadow: 0 0 8px #5d8bfb, 0 0 16px rgba(93, 139, 251, 0.4); transform: scale(1.02); outline: none; // 可选：添加微小脉冲动画（需额外 keyframe） animation: pulse 2s infinite alternate; } } // 嵌套菜单缩进 .nest-menu .el-menu-item { padding-left: 50px !important; } } // 🌀 @keyframes: 脉冲发光动画（可选） @keyframes pulse { 0% { box-shadow: 0 0 8px #5d8bfb, 0 0 16px rgba(93, 139, 251, 0.4); } 100% { box-shadow: 0 0 12px #79a7ff, 0 0 24px rgba(93, 139, 251, 0.6); } } // ================================================================ // 🖼️ Logo 区域美化建议（配合使用） // ================================================================ .sidebar-logo-container { text-align: center; padding: 20px 0; .sidebar-logo-link { color: $base-logo-title-color; font-size: 18px; font-weight: bold; letter-spacing: 1px; text-shadow: 0 0 6px rgba(255, 255, 255, 0.5); } } </style> error in ./src/layout/components/Sidebar/index.vue?vue&type=style&index=0&id=33ec43fc&scoped=true&lang=scss Syntax Error: SassError: Undefined variable. ╷ 81 │ background: $base-menu-background !important; │ ^^^^^^^^^^^^^^^^^^^^^ ╵ src\layout\components\Sidebar\index.vue 81:15 root stylesheet @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/layout/components/Sidebar/index.vue?vue&type=style&index=0&id=33ec43fc&scoped=true&lang=scss 4:14-495 15:3-20:5 16:22-503 @ ./src/layout/components/Sidebar/index.vue?vue&type=style&index=0&id=33ec43fc&scoped=true&lang=scss @ ./src/layout/components/Sidebar/index.vue @ ./src/layout/components/index.js @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/layout/index.vue?vue&type=script&lang=js @ ./src/layout/index.vue?vue&type=script&lang=js @ ./src/layout/index.vue @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.1.15:80&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
09-29
> @import "../../../assets/styles/variables.scss"; > ``` --- ### ✅ Webpack / Vue CLI 需要安装的依赖（如未安装） 确保项目已安装 `sass` 和 `sass-loader`（新版推荐用 `sass` 替代 `node-sass`）： ```...
Vue引入scss文件报错 Syntax Error: SassError: Undefined variable.23 │ $b-custom-radio-indicator-border-rad
手撕鸡翅的博客
08-28 9585
错误如下：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; │ ^^^^^
Syntax Error: SassError: Undefined variable: “$color-primary“.
yangbinling的博客
12-06 4985
引入‘$color-primary’后报错修改vue.config.js代码即可原代码：
解决Vue在main.js全局引入scss文件，组件里使用scss变量报错问题
热门推荐
qq_40532145的博客
09-09 3万+
报错：Syntax Error: SassError: Undefined variable. 我一开始的引入方式是这样的： 以为在main.js全局引入了就一劳永逸，写着常规css样式时还好好的，用到scss变量时就报错了。· 解决方法一 在需要用到的 .vue 文件里单独引用 variable.scss 变量文件，but达不到我们想要的“一劳永逸“效果 可能还会有奇奇怪怪的潜在问题，建议使用方法二。 · 解决方法二 配置vue.config.js文件，使得全局都能使用sc...
vue项目使用的是sass打包报错
m0_54570434的博客
12-20 632
变换为。
sass报错：[sass] Undefined variable. @import升级@use语法注意事项
莫循的AI编程博客
02-17 1618
这里我踩了一个坑找半天的问题，原因是sass升级到1.85之后 定义变量前加上 - 就是表示变量私有，即使使用@use导出。今天创建vue3项目，迁移老项目代码，使用sass的时候发现@import语法已经废弃，官方推荐使用@use替换。这里去掉test前的-，就可以正常访问变量。在新的scss文件里也是访问不到的。
记录vite引入sass预编译报错error during build: [vite:css] [sass] Undefined variable.问题
weixin_43073383的博客
03-28 1395
必须把"sass":降到 v"1.69.5",然后vite和页面引入的scss 都改为import**加粗样式
使用uview-ui遇见SassError: Undefined variable
zhaohonghaofly的博客
03-03 9691
uniapp 中出现 Undefined variable $u-type-primary-light 问题
【Vue学习】使用 “scss” 时报错‘ vue-style-loader css-loader
java_dazhuzhu的博客
05-01 1051
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记。
Vue3开发者工具插件：深入浏览器中的Vue.js调试
资源摘要信息: "Vue.js devtools (Vue3开发者工具插件)" Vue.js是一个流行的JavaScript框架，用于构建用户界面和单页应用程序。Vue3是Vue.js的最新主要版本，提供了许多改进和新特性，包括Composition API、...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值