Angular2 таблицы стилей уровня модуля

Я проектирую свой веб-сайт в модульной структуре, используя sass, и я готов организовать таблицы стилей таким образом, чтобы я определял таблицу стилей на каждом уровне модуля (вместо уровня компонента), а затем импортировал его во всех компонентах, чтобы сохранить стандартный макет для всего модуля.

Итак, это хороший подход?

Если да, существует ли способ экспортировать CSS из файла module.ts ко всем компонентам. Аналогичным образом, службы доступны с помощью providers. Это избавит меня от необходимости импортировать один и тот же файл CSS во всех компонентах по отдельности.

Ответ 1

Итак, это хороший подход?

Его субъективность. Модули Angular помогают организовать приложение в единые блоки функциональности. Могу ли я использовать разные стили для различных функциональных блоков? Очень маловероятно.

Есть ли способ экспортировать CSS из файла module.ts во все компоненты.

Нет. Он поддерживается только на уровне компонентов. Обходным путем было бы иметь один файл css, передаваемый всеми компонентами модуля. Тогда снова хорошей практикой было бы модульное использование css и использование их на уровне компонентов.

Ответ 2

Итак, скажем, у нас есть следующая структура в нашем angular приложении

+-- src
|   +-- app
|   |   +-- customer
|   |   |   +-- customer.scss
|   |   |   +-- customer.module.ts
|   |   +-- product
|   |   |   +-- product.scss
|   |   |   +-- product.module.ts
|   +-- sass
|   |   +-- _common.scss
|   |   +-- app.scss
|   |   +-- project-level-styles.scss

Мы можем настроить sass файл на уровне проекта следующим образом:

@import 'common';

// project level classes
@import 'project-level-styles';

// module level classes
@import '../app/customer/customer.scss'
@import '../app/customer/product.scss'

Итак, в этих customer.scss и product.scss у меня будут классы, которые являются общими для многих компонентов внутри этого модуля.

Следует отметить, что когда вы создаете таблицу стилей не на уровне компонента и помещаете ее где-то в другом месте, как внутри модуля или каталога проекта, способ angular относится к этим стилям.

Angular Стили компонентов

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

Поэтому имейте в виду, что любые таблицы стилей, не связанные с массивом компонентов styleUrls, могут применяться к любому элементу вашего сайта (если вы не используете специфику). Он не применяется только к этому модулю, поэтому это может быть не решение для всех ситуаций, но это то, что я делаю для своих модулей, понимая это, я могу написать свои стили в этой модульной таблице стилей, чтобы быть конкретным для этого модуля, ориентируясь на корень элемент для этого модуля...

компонент vs global

В моем приложении мой customerModule имеет корневой компонент под названием customerComponent, и у меня есть корневой элемент в этом html, который имеет класс:

customer-container

Итак, внутри my customer.scss я могу добавить все мои стили следующим образом:

.customer-container .info-heading {
  font-size: 15px; color: #333;
}

.customer-container .section-divider {
  margin-top: 1em; border-top: 1px solid #dfdfdf;
}

Итак, теперь я могу достичь некоторого уровня специфичности, чтобы мои стили от кровотечения были в других компонентах проекта.

Ответ 3

Да. Определенно подход хорош, чтобы иметь разные таблицы стилей для каждого компонента. Даже CL5 Angular придерживается того же подхода. Вы можете взглянуть и получить удовольствие: LINK

Итак, это хороший подход?

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

Если да, существует ли способ экспортировать CSS из файла module.ts в все компоненты.

По умолчанию Angular CLI не предоставляет стилей для модуля, и это имеет смысл. Почему вам нужна таблица стилей на уровне модуля? Вы можете добавлять стили, относящиеся к компоненту в таблице стилей уровня компонента, и дополнительно, если вы хотите, чтобы на уровне проекта вы могли иметь одну таблицу стилей, где вы можете добавлять все общие стили для проекта.