Stylelint对SCSS插值语法报Unknown word错误求助

使用以下两段SCSS代码时，均触发了Stylelint的Unknown word（CssSyntaxError）错误：

第一段报错代码（选择器插值） #

$tags: p, hr, pre, blockquote, ol, ul, menu, li, dl, dt, dd, figure, figcaption, search, main;

@each $tag in $tags {
  #{$tag} {
    @include apply-strong-styles(#{$tag});
  }
}

对应的错误信息：

Unknown word (CssSyntaxError)Stylelint(CssSyntaxError)

<#{$tag}>
Selector Specificity: (0, 0, 1)

第二段报错代码（属性插值） #

@mixin important-styles($styles, $important: false) {
  @each $property, $value in $styles {
    #{$property}: $value #{if($important, "!important", "")};
  }
}

错误均出现在代码的插值位置：第一段的#{$tag}、第二段的#{$property}。已查阅Stylelint官方文档，且已知postcss曾存在相关bug但已标记修复。

可行解决方案 #

• 指定SCSS语法解析器：在Stylelint配置文件（如.stylelintrc）中设置syntax: "postcss-scss"，避免默认CSS语法无法识别SCSS插值语法。
• 升级依赖版本：确保postcss-scss和stylelint均为最新稳定版，版本不匹配可能导致旧bug残留。
• 更新编辑器插件：若通过编辑器集成的Stylelint插件报错，同步更新插件至最新版并清除编辑器缓存。
• 兼容写法（针对旧版本解析器）：若升级后仍有问题，可尝试给插值内容额外添加引号包裹，例如将#{$tag}改为#{"#{$tag}"}，此方法仅适配部分旧版本场景。

内容的提问来源于stack exchange，提问作者Laurence L