map-get()报错“argument '$map' must be a map”主因是第一个参数非map类型，90%源于变量未定义、拼写错误或被覆盖为null/string/list；需检查变量作用域、定义语法（必须用括号而非花括号）、引号一致性及嵌套取值链式调用。
map-get() 报错 “Argument '$map' must be a map”
这不是你写错了 key，而是 map-get() 的第一个参数根本不是 Map 类型——90% 是变量未定义、拼写错误，或被意外覆盖成 null / string / list。
常见诱因：
-
$theme在@use后没加as *或没正确@forward，导致作用域里压根没有这个变量 - 复制粘贴时把
$colors: (primary: #007bff)写成$colors = (primary: #007bff)（用了=而非:），Sass 当成赋值语句而非 Map 字面量 - Map 定义混用了括号和花括号：
{primary: #007bff}会解析失败，必须用(primary: #007bff) - 在
@if或函数外直接调用map-get($colors, primary)，而$colors是局部变量，此时不可见
map-get() 返回 null 却不报错，样式莫名失效
map-get() 查不到 key 时安静返回 null，CSS 编译继续，但生成的属性值变成 color: null 这种非法语法，浏览器直接丢弃整条声明。
必须加守卫：
- 用
@if map-has-key($colors, 'primary')先判断存在性，再取值 - 键名统一用带引号字符串：
'primary'，避免大小写或驼峰混淆（Primary≠primary） - 别混用引号类型：Map 里是
'primary': #007bff，取值就得用map-get($colors, 'primary')；若定义时没引号primary: #007bff，取值就得用map-get($colors, primary)（此时primary被当变量名）
嵌套 Map 深层取值写法错误
想读 $theme: (colors: (primary: #007bff)) 里的 primary，不能写 map-get($theme, 'colors.primary') —— Sass 的 map-get() 不支持点号路径。
正确链式写法：
map-get(map-get($theme, 'colors'), 'primary')- 或封装函数：
@function theme-color($key) { @return map-get(map-get($theme, 'colors'), $key); }，然后color: theme-color('primary'); - 深层嵌套时，每层都得显式
map-get()，不存在“自动展开”
Vue 单文件组件里 SCSS 的 Map 变量找不到
Vue 的 <style lang="scss"></style> 默认不共享全局变量，@import 或 @use 必须显式写在该 <style></style> 块内。
典型坑：
- 只在
main.scss里定义了$colors，但在组件里没@use '@/styles/vars' as *，变量就不可见 -
@use路径别名（如@use 'styles/vars'）需确保 Vite/Webpack 的 alias 配置已生效，否则styles/vars根本解析不了 - Vue CLI 项目中，若用
sass-resources-loader注入全局变量，注意它不兼容@use，只能配合@import
map-get() 就永远查不到，且不报错，只默默返回 null。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
