Пользовательский загрузочный CSS AngularJS не работает на уровне компонентов - PullRequest
Новая
       12

Пользовательский загрузочный CSS AngularJS не работает на уровне компонентов

0 голосов
/ 11 января 2019

Я решил преобразовать целевую страницу в сайт AngularJS, потому что мне нужно было добавить раздел администратора. Чтобы отделить раздел сайта от раздела администратора, я создал два модуля: website и admin.

Первоначальный веб-сайт был создан с помощью Bootstrap 3 и имеет style.css, который представляет собой пользовательский CSS для всей Bootstrap и веб-сайта в целом.

В версии Angular я могу правильно загрузить сайт после установки Bootstrap 3, а на корневом уровне style.css я делаю следующее: 

@import './app/website/assets/css/style.css';

Проблема в том, что я не хочу, чтобы этот CSS загружался для всего сайта (website + admin). С этой конфигурацией раздел администратора также зависит от CSS.

Импорт работает, только если он находится в style.css. Если я перенесу модуль импорта на веб-сайт в корневой каталог, стили component.css вообще не загрузятся.

Я знаю, что это должно что-то делать со стилевым пространством и ng-deep.

РЕДАКТИРОВАТЬ: Единственный способ, которым я могу правильно загрузить сайт с помощью импорта CSS в своем собственном модуле: 

encapsulation: ViewEncapsulation.None

1 Ответ

0 голосов
/ 12 января 2019

На данный момент нет способа импортировать CSS на уровне модуля. Глобальные стили применяются глобально, и по умолчанию ViewEncapsulation делает так, чтобы специфичные для компонента стили не выходили за пределы остальной части приложения.

Если я перенесу импорт на модуль сайта в корневой компонент.css стили вообще не загружаются.

При импорте этого css в корневой компонент модулей стили применяются только к этому одному компоненту. Я также не стал бы слишком пристально смотреть на ng-deep, так как он устарел https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Не зная, сколько компонентов в WebsiteModule или как выглядит styles.css, я представлю два варианта.

1) Переименуйте styles.css (может запутаться, поскольку он больше не будет глобальным), импортируйте его в каждый из компонентов в WebsiteModule.

Если это окажется слишком утомительным (один из миллиардов компонентов в WebsiteModule), тогда

2) Я бы внимательно посмотрел на рассматриваемый файл styles.css и увидел, какие стили следует применять глобально.

Отключение ViewEncapsulation должно быть последним средством IMO.

...