Sass映射取值失败求助：无法从$theme-colors获取颜色值

问题场景 #

在variable.scss中定义了颜色映射：

$theme-colors: (
  primary: $primary,
  secondary: $secondary,
  gray-medium-emphasis: rgba(0, 0, 0, 0.6),
  gray-border: rgba(0, 0, 0, 0.12),
  gray-low-emphasis: rgba(0, 0, 0, 0.38)
);

在组件样式文件中尝试取值时遇到三类错误：

• 使用get()函数时，Sass报错映射不是合法CSS值
• 使用map-get()触发lint错误
• 使用map.get()提示不存在map模块

解决方案 #

1. 根据Sass版本选择正确的取值语法

Sass的映射取值函数因版本和语法规范不同而有差异：

• Dart Sass 1.33+（SCSS语法）：需先导入内置map模块，再用map.get()

  // 先导入map模块
  @use "sass:map";
  
  .calendar-outline-btn {
    outline: 1px solid map.get($theme-colors, gray-border);
    padding-top: 0.3125em;
    padding-bottom: 0.3125em;
    color: map.get($theme-colors, gray-medium-emphasis);
  }
  

• LibSass/旧版Dart Sass：直接使用map-get()内置函数，无需导入模块

  .calendar-outline-btn {
    outline: 1px solid map-get($theme-colors, gray-border);
    padding-top: 0.3125em;
    padding-bottom: 0.3125em;
    color: map-get($theme-colors, gray-medium-emphasis);
  }
  

2. 修复map-get()触发的lint错误

如果map-get()触发lint报错，通常是stylelint等工具的规则限制，可通过两种方式解决：

• 打开项目lint配置文件（如.stylelintrc），将map-get添加到scss/function-no-unknown规则的允许列表中
• 切换到map.get()语法，同时确保已导入sass:map模块

3. 弃用错误的get()写法

get()并非Sass内置的映射取值函数，使用它会导致Sass直接输出整个映射结构到CSS，引发解析错误，直接替换为上述正确语法即可。

内容的提问来源于stack exchange，提问作者Nikola Vojnovic