Как предотвратить переименовывание классов в Webpack Angular?

Question

[Роман Ракзин]

Я подключил файл стилей с описанием классов глобально в angular. Если страницу написать целиком в одном файле, то весь дизайн работает.
Если же я создам компонент и часть данных перенесу в него и подключу его в разметке, то часть стилей теряются- вообщем дизайн плывёт.
Не понимаю- почему . Может ли быть, что webpack переименовывает классы и затем я хочу применить к элементу класс myclass - то он переименуется до другого и класс и стили не применятся?
Если да- то как быть с этим?
Если нет- то что может ещё быть, что объяснит, почему внутри компонента классы не работают, когда если вынести разметку в файл высшего уровня, где подключен глобальный файл стилей- то всё работает.

Comments

[yaroslav1996]

Дело в том что по умолчанию, angular инкапсулирует компоненты. Для предотвращения дубля css классов. если вы хотите глобально работать со стилями, то вам нужен style.css или style.scss. Не знаю что там у вас.

Или отключить как пример:

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  encapsulation: ViewEncapsulation.None
})

encapsulation: ViewEncapsulation.None
https://angular.io/api/core/ViewEncapsulation