Angular 2 - Глобальный файл CSS

Question

Можно ли добавить глобальный файл CSS в Angular 2? На данный момент у меня есть много разных компонентов, которые имеют одинаковый стиль кнопок, но каждый из компонентов имеет свой собственный CSS-файл с стилем. Это расстраивает изменения.

Я прочитал где-то на переполнение стека, чтобы добавить:

import { ViewEncapsulation } from '@angular/core'; //add this 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    encapsulation: ViewEncapsulation.None   //add this 
}) 

Так я добавил ViewEncapsulation строки в корневой компонент, а затем добавил CSS стиль корневому приложения CSS (app.component.css) и удалены CSS-стиль из отдельных CSS-файлов компонентов, и это не сработало.

Наверняка есть способ добавить глобальный файл CSS? Нужно ли добавлять что-то к отдельным компонентам, чтобы они могли получить доступ к глобальному файлу CSS?

Answer 1

Вы можете просто импортировать css в основной файл html.

Answer 2

С сегодняшнего дня с Angular 4 просто напишите свои глобальные стили в файле src/styles.css. Этот файл будет добавлен в styles.bundle.js при запуске ng build.

Файлы стиля зарегистрированы в Angular-CLI в файле .angular-cli.json. Вы увидите массив с именем styles внутри массива apps с единственным элементом по умолчанию, который равен styles.css (пути относятся к каталогу src). Если вы хотите использовать SCSS, измените расширение этого элемента на scss, а затем измените расширение файла src/styles.css.

Если вы хотите в будущем файлов стилей (для компонентов, например), чтобы быть scss по умолчанию, на тот же файл найти это в конце:

"defaults": { 
    "styleExt": "css", 
    "component": {} 
} 

и изменить значение styleExt к scss.