如何在Tailwind css @apply指令中使用sass插值？

Question

我正在尝试在 tailwind apply 指令中使用 sass 插值（请参见下面的示例）。
根据 VSCode，下面的语法是不正确的 (

at-rule or selector expectedscss(css-ruleorselectorexpected)

)。
然而 postcss 输出构建的 css 没有任何错误。

$colorTypes: "primary", "success", "warning", "danger";

@each $colorType in $colorTypes {
  .card-#{$colorType} {
    @apply bg-#{$colorType};
  }
}

这是 VSCode 错误吗？
有什么办法可以解决吗
还有其他方法可以在 apply 语句中包含变量吗？

截图：

tailwind.config.js

：

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
    colors: {
      primary: "#111111",
      success: "#222222",
      warning: "#333333",
      danger: "#444444",
    },
  },
  plugins: [],
};

Answer 1

这是一个 VSCode 错误，内置 Sass 语法解释器不太理解

@apply

，因为该 at 规则是 Tailwind 特定的。您可以安全地忽略该错误或在 VSCode 设置中关闭该错误。