uniapp 中出现 Undefined variable $u-type-primary-light 问题

问题描述

uniapp 引入 uview-ui 后 一顿操作,出现 Undefined variable: "$u-type-primary-light" 错误。

解决问题

第一步:确保 HBuilder X 是安装了 scss/sass 编译插件

在这里插入图片描述

第二步:确保在根目录下 uni.scss 文件中引入 theme.scss

@import "uview-ui/theme.scss"; // 放在代码首行

在这里插入图片描述

第三步:确保在根目录下 App.vue 文件中添加 lang="scss"index.scss

<style lang="scss">
	@import "uview-ui/index.scss";
</style>

在这里插入图片描述

问题得以解决。


点赞 评论 收藏 ~~ 有疑惑的小伙伴,可能是我表达不清楚,可以留言讨论,如有错误,也希望大家不吝指出。 ~~ 点赞 评论 收藏
// =========================================================================== // 🎨 全新风格:深空幻影 · 紫曜金属主题 (Neon Cyber Dark - Purple Glow) // 特点:暗紫金属底 + 霓虹蓝紫高亮 + 悬浮/点击动效 + 动态渐变 // =========================================================================== // 基础组件色盘(保留用于按钮、标签等) $blue: #5d8bfb; $light-blue: #81a7ff; $red: #e93f4c; $pink: #f06aa9; $green: #2ecc71; $tiffany: #4db6ac; $yellow: #ffb74d; $panGreen: #4bbf91; // 疗养院专用变量 $care-bg-light: #f8f9fa; // 米白底色,护眼柔和 $care-bg-dark: #e9f5f2; // 浅薄荷绿,用于激活项背景 $care-text-primary: #34495e; // 深灰蓝,稳重易读 $care-text-secondary: #666666; // 次要文字 $care-accent: #3a9c8c; // 主色调:森林绿 → 代表健康与生命力 $care-sidebar-width: 240px; // 更宽便于点击 // ===================================================================== // 🖌️ 主题变量定义 // ===================================================================== // 菜单默认文字颜色:柔和银白,略带透明 $base-menu-color: hsla(220, 18%, 85%, 0.78); // 激活项和悬停文字颜色:纯白增强对比 $base-menu-color-active: #ffffff; // 主菜单背景:深邃宇宙黑蓝基底 $base-menu-background: #121424; // Logo 标题文字颜色 $base-logo-title-color: #ffffff; // 子菜单区域背景(比主背景稍亮) $base-sub-menu-background: #1b1f36; // 悬停背景:使用动感线性渐变模拟“能量流动” $base-sub-menu-hover: linear-gradient(90deg, #3a2d6d, #2a4a80); // 侧边栏宽度:适配图标+中文更舒适 $base-sidebar-width: 220px; // --------------------------------------------------------------------------- // 💡 Light Mode 回退值(用于主题切换兼容) // --------------------------------------------------------------------------- $base-menu-light-color: rgba(0, 0, 0, 0.7); $base-menu-light-background: #ffffff; $base-logo-light-title-color: #001529; // ===================================================================== // 📦 导出给 JavaScript 使用的常量 // ⚠️ 渐变无法导出,仅导出基础色用于 JS 控制逻辑 // ===================================================================== :export { menuColor: $base-menu-color; menuColorActive: $base-menu-color-active; menuBackground: #121424; menuLightColor: $base-menu-light-color; menuLightBackground: $base-menu-light-background; subMenuBackground: #1b1f36; subMenuHover: #2a4a80; // 提供 hover 主色调用于 JS 判断 sideBarWidth: $base-sidebar-width; logoTitleColor: $base-logo-title-color; logoLightTitleColor: $base-logo-light-title-color; } :export { menuBackground: $care-bg-light; menuLightBackground: $care-bg-light; menuColor: $care-text-secondary; menuColorActive: $care-text-primary; subMenuBackground: $care-bg-dark; theme: $care-accent; sideBarWidth: $care-sidebar-width; } Failed to compile. ./src/layout/components/Sidebar/index.vue?vue&type=style&index=0&id=33ec43fc&lang=scss&scoped=true (./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&lang=scss&scoped=true) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined variable. ╷ 105 │ color: $care-text-secondary; │ ^^^^^^^^^^^^^^^^^^^^ ╵ src\layout\components\Sidebar\index.vue 105:14 root stylesheet
最新发布
09-29
评论 8
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

shaoin_2

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值