Angular 18中嵌套SCSS结合Tailwind无法生效求助

你的SCSS嵌套选择器写法有误，导致绿色背景样式无法匹配到目标元素：

问题原因 #

当前SCSS中.card下的.primary会被编译为.card .primary（匹配.card的子元素中带有.primary的元素），但你的HTML里.primary是和.card并列在同一个<div>上的类，所以样式无法生效。

修正后的SCSS代码 #

.card {
    @apply flex flex-col bg-neutral-700 border shadow-sm rounded-xl p-4 md:p-5 m-1 md:m-3 text-white;

    // 使用&引用当前父选择器，匹配同时拥有.card和.primary类的元素
    &.primary {
        @apply bg-green-500;
    }

    .card-body {
        @apply flex flex-col -m-1.5 overflow-x-auto p-1.5 min-w-full align-middle overflow-hidden;
    }
}

说明 #

SCSS中的&代表当前父选择器的引用，&.primary会被编译为.card.primary，这样就能正确匹配同时带有.card和.primary类的<div>元素，绿色背景样式即可正常生效。

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