带变量的css文件用WebStorm打开后报错如何处理？

Question

一个项目中使用了如下面格式的css参数：
$ui-primary: hsla(215, 100%, 95%, 1); / #E5F0FF /
$ui-secondary: hsla(215, 75%, 95%, 1); / #E9F1FC /
$ui-tertiary: hsla(215, 50%, 90%, 1); / #D9E3F2 /

使用时：
.button {

display: flex;
background: $motion-primary;

}
这样，但这种css文件使用WebStorm打开时报错，该如何设置才能让WebStorm识别这种css文件，或者哪个ide支持这种css文件？