Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.05.2018, 09:35
Аспирант
Отправить личное сообщение для sniffysko Посмотреть профиль Найти все сообщения от sniffysko
 
Регистрация: 20.10.2009
Сообщений: 42

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

Грузить по умолчанию CSS админки для 90% пользователей, которые админкой пользоваться не будут смысла нет. Как выполнить загрузку стилей админки, если админка находится по маршруту sitename.com/admin и в её корне лежит компонент admin.component?
Ответить с цитированием
  #2 (permalink)  
Старый 02.05.2018, 13:09
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,114

sniffysko,
Можно задавать так
{ "input": "./admin/admin.scss", "lazy": true,  "output": "admin" }

В процессе сборки будет сгенирирован admin.css файл, а потом вручную прописывать его в шаблоне админ компонента.
https://stackoverflow.com/questions/...h-lazy-loading
Ответить с цитированием
  #3 (permalink)  
Старый 02.05.2018, 14:03
Аспирант
Отправить личное сообщение для sniffysko Посмотреть профиль Найти все сообщения от sniffysko
 
Регистрация: 20.10.2009
Сообщений: 42

Спасибо, уважаемый.
Буду пробовать.
Ответить с цитированием
  #4 (permalink)  
Старый 02.05.2018, 14:47
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,114

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

Да. Приложение разбито на модули. Имеется модуль admin.module.ts, который подключается к корневому модулю. Пока он грузится в куче со всем, но потом планируется перевести его в отдельный подгружаемый модуль.
Именно с этой целью и хотел отделить функционал и подгружаемый контент в отдельный подгружаемый компонент.
А что вы имеете в виду говоря "внутри компонентов данного модуля подгружать нужный css"?
Вы имеете в виду, подключить его в корневом компоненте админки "admin.component", указав файлы стилей? Насколько я знаю, подключаемые в компоненте стили действуют только на компонент, не распространяя свое действие на подчиненные компоненты.
Ответить с цитированием
  #6 (permalink)  
Старый 17.05.2018, 16:48
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,114

sniffysko,
::ng-deep
https://blog.angular-university.io/a...-host-context/
Ответить с цитированием
  #7 (permalink)  
Старый 17.05.2018, 17:21
Аспирант
Отправить личное сообщение для sniffysko Посмотреть профиль Найти все сообщения от sniffysko
 
Регистрация: 20.10.2009
Сообщений: 42

В примере использования этого псевдокласса получается, что его надо применять к каждому классу. Да и подключается он непосредственно в компонент и много стилей не папишешь.
Я вот посмотрел этот урок 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
})

Так тоже можно? Или это немного не то?
Ответить с цитированием
  #8 (permalink)  
Старый 17.05.2018, 18:53
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,114

sniffysko,
Да, можно и так.
Цитата:
В примере использования этого псевдокласса получается, что его надо применять к каждому классу.
Ну при использовании препроцессоров, например scss, это компактно получается
::ng-deep {
...
.class1 {}
.class2 {}
...
}
Ответить с цитированием
  #9 (permalink)  
Старый 18.05.2018, 09:14
Аспирант
Отправить личное сообщение для sniffysko Посмотреть профиль Найти все сообщения от sniffysko
 
Регистрация: 20.10.2009
Сообщений: 42

Спасибо, destus, вечером пока дома был примерно такое и надумал.
Буду пробовать.
Ответить с цитированием
  #10 (permalink)  
Старый 18.05.2018, 09:50
Аспирант
Отправить личное сообщение для sniffysko Посмотреть профиль Найти все сообщения от sniffysko
 
Регистрация: 20.10.2009
Сообщений: 42

Попробовал с ::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".
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не удается подключить javascript-код из отдельного файла Mack Events/DOM/Window 1 07.03.2015 16:05
Шаблон сброса стандартных стилей Olegich (X)HTML/CSS 14 13.09.2013 17:47
Воспроизвести два аудио файла по очереди VadimD Internet Explorer 1 28.03.2013 22:03
Два файла, две функции, но с одним именем Janom Общие вопросы Javascript 19 31.01.2013 08:46
Динамическое применение стилей к элементу и их отмена Amphiluke Events/DOM/Window 10 26.11.2012 20:33