使用Tailwind推荐的!important语法时出现SCSS语法错误求助

问题分析 #

你代码里的错误出在#{!important}这个写法上——SCSS的插值语法#{}是用来插入变量或合法表达式的值的，而!important是CSS的优先级标记，不是SCSS变量/表达式，直接这么写会导致SCSS解析器无法识别，抛出at-rule or selector expected错误。

正确写法 #

不需要使用插值，直接在@apply的类名后面追加!important即可：

@import "tailwind/base";
@import "tailwind/components";
@import "tailwind/utilities";

@import "scrollbars";
@import "fonts";

body {
  @apply font-regular !important;
}

补充说明 #

Tailwind官方推荐的在@apply中使用!important的方式就是直接追加，不需要额外的插值语法。这个写法在SCSS环境下完全兼容，不会触发语法错误。

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