Використання CSS замість SCSS може призвести до непередбачуваних проблем, особливо залежно від вмісту вашого файлу .browserslist.
У цьому прикладі для тестування використано код, що демонструє проекцію вмісту за допомогою Angular. Клас .text-1, який є частиною проекції, має атрибут [_ngcontent-ng-c2567263143], що забезпечує відокремлення стилів для дочірніх компонентів. Це означає, що застосовані стилі до цього класу не впливають на інші компоненти.
У першому випадку, коли використовуються стандартні діапазони сумісності браузерів для Angular 19.x, включаючи останні 2 версії Chrome, Firefox, Edge, Safari, iOS і Android, а також Firefox ESR, проекція працює коректно, і стилі не впливають на інші елементи, оскільки в HTML присутній спеціальний атрибут для стилізації.
Проте у другому випадку, коли з .browserslist вимикаються останні 2 версії Safari та iOS, результати змінюються. Оскільки клас .text-1 більше не має атрибута [_ngcontent-ng-...], стилі з menu.component.css починають впливати на дочірні компоненти.
Якщо використовується SCSS, результат буде аналогічний першому випадку, незалежно від налаштувань .browserslist.
Це проблема, що частково відключає функцію інкапсуляції в Angular. Вона була повідомлена команді розробників Angular в листопаді 2024 року. До того, як ця проблема буде виправлена, рекомендується залишити .browserlistsrc за замовчуванням або утриматися від використання CSS у проєктах на Angular.
Перекладено з: Things to keep in mind when using CSS in Angular 19