Применить стиль CSS для всех компонентов в угловом 2 приложении

У меня есть очень простые и многоразовые правила CSS, такие как:Применить стиль CSS для всех компонентов в угловом 2 приложении

.ng-invalid { 
    border-left: 5px solid #a94442; 
} 

.ng-valid { 
    border-left: 5px solid #42A948; 
}

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

У меня, должно быть, отсутствует кое-что очень очевидное.

источник

2016-04-14 mariocatch

Возможно, вы должны объявить глобальные правила css в своей таблице html или внешней таблицы стилей.

источник

2016-04-14 20:44:22 kemsky

Guess Я думал слишком ** Угловой ** об этом. Да, ты прав, ха-ха. – mariocatch

Вы можете achive это мой изменить свой стиль

:host .ng-invalid { 
    border-left: 5px solid #a94442; 
} 

:host .ng-valid { 
    border-left: 5px solid #42A948; 
}

и в ваших дочерних компонентов вы можете установить свойство encapsulation: ViewEncapsulation.None (но по умолчанию это ViewEncapsulation.None, так что вы не можете не нужно устанавливать также).

так что теперь вы должны иметь возможность использовать ваш стиль в своих дочерних компонентах.

Демо: http://plnkr.co/edit/ALgOw3FHmW8RsClI8Nnb?p=preview

источник

2016-04-14 21:31:55 sreeramu

Угловая добавляет уникальные классы компонента и вносит изменения в селекторы CSS добавлены к компонентам только матч, что компоненты уникальный класс, прежде чем добавить CSS в <head>. Это должно эмулировать инкапсуляцию стиля теней DOM.

Вы можете работать вокруг него

encapsulation: ViewEncapsulation.None набор, который предотвращает перезапись стили для компонентов, где герметизация отключена
добавить CSS в index.html непосредственно. Угловое не переписывает CSS, который не добавляется к компонентам.
использовать «теневой пирсинг CSS combinator» * >>> someSelector { ... }, который также заставляет CSS игнорировать уникальные классы, добавленные к компонентам.
Подсказка: /deep/ является псевдонимом >>>, но лучше работает с SASS.

источник

2016-04-15 05:38:47

Из командной строки запуска:

НПХ установить файл-погрузчик стиль-погрузчик --save-DEV

Теперь в webpack.config.js добавьте следующую строку в массив погрузчиков:

{тест: /\.(eot|woff2|woff|ttf|svg)/, погрузчик: 'файл-загрузчик'}

Теперь в вашем app.component.ts, после ваших операторов импорта, добавить следующая строка:

require ('style! Bootstrap/dist/css/bootstrap.CSS')

Это предполагает, что вы используете последнюю версию angular2/angular2 семени, расположенный здесь: https://github.com/angular/angular2-seed от 8 ноября 2016 года

источник

2016-11-08 10:08:35 SlimSim

На мой взгляд, вы должны согласиться с определенной стратегией в этом отношении всей вашей целом команда.

E.g. вы можете установить encapsulation: ViewEncapsulation.None точно так же, как @sreeramu, упомянутый в его ответе. Но только для приложения (корневого) компонента.

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

источник

2017-03-29 07:34:39 marekozw

Вы можете написать свой CSS внутри Src/styles.css

или вы можете создать новый файл CSS и указать в .angular-cli.json файла

"apps": [ 
    "styles": ["styles.scss"] 
]

источник

2017-07-06 06:47:41

Применить стиль CSS для всех компонентов в угловом 2 приложении

ответ

Смежные вопросы