Два файла стилей в проекте

[sniffysko]

Проект Angular 5 состоит из двух частей.
Морда сайта и админка. Стилистика и файлы этих частей находятся в двух различных файлах. Первый блок стилей для морды подключается в .angular-cli.json:

"styles": [
	"styles.scss"
],

Грузить по умолчанию CSS админки для 90% пользователей, которые админкой пользоваться не будут смысла нет. Как выполнить загрузку стилей админки, если админка находится по маршруту sitename.com/admin и в её корне лежит компонент admin.component?

[destus]

sniffysko,
Можно задавать так

{ "input": "./admin/admin.scss", "lazy": true,  "output": "admin" }

В процессе сборки будет сгенирирован admin.css файл, а потом вручную прописывать его в шаблоне админ компонента.
https://stackoverflow.com/questions/...h-lazy-loading

[sniffysko]

Спасибо, уважаемый.
Буду пробовать.

[destus]

sniffysko,
А зачем вообще грузить этот стиль глобально? Если это отдельный url на сайте (yousite.com/admin), то используя ангуляровский роутер можно выделить в отдельный модуль функциональность администрирования и внутри компонентов данного модуля подгружать нужный css. Далее angular-cli сделает отдельный чанк, который можно загружать lazy loading или preloading. Внутри этого файла будут и стили, и размета, и js. https://angular.io/guide/router#mile...ronous-routing

[sniffysko]

Да. Приложение разбито на модули. Имеется модуль admin.module.ts, который подключается к корневому модулю. Пока он грузится в куче со всем, но потом планируется перевести его в отдельный подгружаемый модуль.
Именно с этой целью и хотел отделить функционал и подгружаемый контент в отдельный подгружаемый компонент.
А что вы имеете в виду говоря "внутри компонентов данного модуля подгружать нужный css"?
Вы имеете в виду, подключить его в корневом компоненте админки "admin.component", указав файлы стилей? Насколько я знаю, подключаемые в компоненте стили действуют только на компонент, не распространяя свое действие на подчиненные компоненты.

[destus]

sniffysko,
::ng-deep
https://blog.angular-university.io/a...-host-context/

[sniffysko]

В примере использования этого псевдокласса получается, что его надо применять к каждому классу. Да и подключается он непосредственно в компонент и много стилей не папишешь.
Я вот посмотрел этот урок youtube com / watch ? v=jU-n5dHHelI
И тут предложен вариант:

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

Так тоже можно? Или это немного не то?

[destus]

sniffysko,
Да, можно и так.

В примере использования этого псевдокласса получается, что его надо применять к каждому классу.

Ну при использовании препроцессоров, например scss, это компактно получается

::ng-deep {
...
.class1 {}
.class2 {}
...
}

[sniffysko]

Спасибо, destus, вечером пока дома был примерно такое и надумал.
Буду пробовать.

[sniffysko]

Попробовал с ::ng-deep, но что-то не получилось. Возможно где-то накосячил. В итоге сделал так:
Компонент:

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

admin.scss

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

.portal-admin {
	@import '../service_styles/_grid.scss';
	@import '../service_styles/_spacing.scss';
}

admin.component.html

<div class="portal-admin">
....
</div>

В итоге:
1. Стили грузятся в момент входа в модуль админки.
2. Стили админки локализуются контейнером со стилем "portal-admin".