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

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

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

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?

Ответ 1

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

Ответ 2

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

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

Использование SCSS

Если вы хотите использовать SCSS, просто измените расширение вашего файла src/styles.css на .scss, а затем .scss изменение в вашем .angular-cli.json (или angular.json в 6+), с помощью редактирование записи в массиве styles.

Сделайте Angular использовать SCSS по умолчанию

При создании компонентов вы бы хотели, чтобы Angular создавал .scss стилей .scss вместо .css. Вот как:

Угловой 7

Начиная с Angular 7, когда вы создаете приложение с ng new appname, вам будет предложено выбрать формат таблицы стилей, который вы хотите использовать, поэтому вы просто выбираете SCSS (источник). Похоже, что здесь заканчивается необходимость вручную настроить Angular для использования SCSS.

Угловой 6

Добавьте это в конец вашего файла angular.json (источник):

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}

Угловой 4 и ниже

Найдите это в конце вашего .angular-cli.json и измените значение styleExt на scss:

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

Ответ 3

Ты можешь использовать:

Добавить main.css
Откройте файл styles.css в главной папке
Добавьте эту строку (@import 'main.css';)