Вложенный scss не работает с angular 18 с попутным ветром

Пожалуйста, используйте приведенный ниже код:

.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;

    &.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, преобразованный в CSS,

.card {}
.card .primary {}
.card .card-body {}

Вам нужно использовать оператор &, чтобы сказать «скопировать содержимое родительского элемента в этот селектор»:

.card {
  &.primary {}
  .card-body {}
}

Это тогда дает

.card {}
.card.primary {}
.card .card-body {}