Загрузите CSS-файлы из node_modules в угловой компонент, имеющий веб-пакет - PullRequest
0 голосов
/ 26 марта 2019

У меня есть два модуля: FrontUI и AdminUI.FrontUI является корневым модулем, а AdminUI загружается лениво.

В разделе администратора мне нужно загрузить несколько файлов .css, которые отличаются от FrontUI и относятся только к разделу администратора.Я попробовал следующее -

  1. Я добавил эти пути файла .css в angular.json, как показано ниже, и это работает.Но это будет связывать эти файлы при запуске, что неправильно
"styles": [
              "node_modules/@xyzPlugIn/base.css",
              "node_modules/@xyzPlugIn/theme.css"
            ],
Я добавил путь к файлу .css в файл component.ts следующим образом, но это не рендеринг css
@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['../node_modules/@xyzPlugIn/base.css',
              '../node_modules/@xyzPlugIn/theme.css']
})

Можно ли загружать разные стили для двух отдельных модулей, так какклиент / пользователи разные?Можно ли связать эти файлы в производственной среде?

PS: Упомянутая мной структура проекта коротка для лучшего понимания.

1 Ответ

2 голосов
/ 28 марта 2019

Спасибо Джонатан Хэмел .

Я достиг следующих результатов:

admin.component.ts

@Component({...
  styleUrls: ['./admin.component.css'],
  encapsulation: ViewEncapsulation.None
})

admin.component.css

@import "~@xyzPlugIn/base.css";
@import "~@xyzPlugIn/theme.css";
  1. Добавление тильды '~' представляет модуль node_module в Angular.
  2. Установить инкапсуляцию в ViewEncapsulation.None, чтобы его подкомпоненты также могли применять этот стиль.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...