WebStorm 2020.2中SCSS变量颜色高亮及背景使用问题求助

我之前也在老版本WebStorm里碰到过类似的SCSS变量颜色预览问题，结合你的情况，给你几个实用的解决方向：

1. 更换支持SCSS变量的颜色高亮插件 #

你用的Color Highlighter确实对预处理器变量支持有限，试试专门针对SCSS变量的插件：

• 去WebStorm插件市场搜索SCSS Variables Highlighter，安装后在插件设置里启用SCSS变量的颜色预览功能，它能直接识别你定义的$variable格式变量，并在编辑器里显示对应的颜色块。
• 另外Color Info插件也能支持SCSS变量，悬停时会显示变量对应的颜色值和预览，同时支持直接在编辑器内调整颜色。

2. 开启WebStorm原生的SCSS变量颜色预览 #

WebStorm 2020.2其实自带了部分原生支持，你可以这样设置：

• 打开「Settings/Preferences」（Windows：File > Settings；Mac：WebStorm > Preferences）
• 导航到Editor > Color Scheme > SCSS
• 找到Variable选项，在右侧面板里勾选「Show inline color preview」（如果有这个选项），同时可以给变量设置醒目的前景色，方便识别。
• 另外，开启Editor > General > Appearance里的「Show color preview for CSS variables」，这样鼠标悬停在SCSS变量上时，会直接弹出颜色预览框。

3. 排查SCSS变量作为背景色失效的问题 #

如果变量本身没生效，先检查基础用法是否正确：

• 确保变量定义正确，比如：

  $accent-color: #FFC107;
  

• 使用变量时语法无误：

  .banner {
    background-color: $accent-color;
  }
  

• 如果变量在单独的文件里，要确认用@import正确引入了（注意路径是否匹配，WebStorm会对错误路径标红提示）：

  @import './path-to-your-variables-file';
  

• 最后检查SCSS编译是否正常，比如你用的是Webpack、Gulp还是WebStorm自带的编译器，查看编译输出有没有报错，比如变量未定义的错误，这会导致编译后的CSS里没有正确替换变量值。

内容的提问来源于stack exchange，提问作者bj.ltd