Как встроить стили для каждой библиотеки в Angular, как в виджет общего назначения? - PullRequest
Новая
       17

Как встроить стили для каждой библиотеки в Angular, как в виджет общего назначения?

0 голосов
/ 07 апреля 2019

У меня проблема с созданием собственных библиотек на Angular 2+.Идея состоит в том, чтобы создать фрагмент кода между компонентами и использовать их через библиотеки с Angular.Однако у меня есть недостаток в том, что стили конфликтуют со стилями в основном приложении.

Frameworks

  • Angular 2 +
  • TypeScrypt
  • Angular Library

Я приведу пример:

У меня есть библиотека виджетов, которая дает мне прогноз погоды с помощью модального сгенерированного с помощью ng-bootstrap.Проблема в том, что в этой библиотеке я использую некоторые особые и элементарные дизайны, чтобы придать ей хороший стиль, и что она соответствует ее бизнес-модели.

Я храню эти дизайны в папке, называемой активами, в файле с именемstyles.css влияет на классы и дизайн моей библиотеки.

project/library_name/src/lib/assets/...

Затем я импортирую эти проекты в мое приложение Angular в файл стилей или непосредственно в angular.json.

styles.css 

@import "./path/to/stylesheet/assets/styles/styles.css";

или

angular.json 

                        "styles": [
                            "src/styles.css",
                            "./path/to/stylesheet/assets/styles/styles.css"
                        ],
                        "scripts": [],

Цель, которую я ищу, состоит в том, чтобы мое основное приложение компилировалосьстили моей библиотеки, но это не влияет за пределы среды компонента, который я буду использовать, то есть я не хочу, чтобы мое приложение наследовало стили этой библиотеки, поскольку они могут конфликтовать со стилями, которые яиспользовать в приложении, поэтому я определенно хочу инкапсулировать, размещая их исключительно для области и содержимого библиотеки компонентов.

Iсделаю неуклюжий пример, но его нужно понимать

Представьте, что в библиотеке я использую стили, предоставляемые Angular Bootstrap, а в своем приложении я использую стили Materialise.Это было бы ужасно и очень неуклюже, поэтому я стараюсь ограничить библиотеку, и ее компоненты не вступают в этот конфликт со стилями.

Наконец, превратите их в совершенно отдельный виджет, но встроенный.

...