Угловое использование CSS-переменной в глобальном файле style.css

Question

Как использовать переменную CSS в глобальном файле CSS

Просто проверьте файл style.css в stackblitz

https://stackblitz.com/edit/angular-themeing-y3jwrk?file=src/styles.css

Answer 1

в глобальном CSS-файле, styles.css, у меня есть этот код:

import ...

:root {
    --main-color: #3f51b5;
}

объявляет переменную css, "основной цвет"

затем в файле css дочернего компонента я могу напрямую использовать переменную

#component-body {
  background: var(--main-color);
}

Answer 2

В глобальном файле style.css определите пользовательские свойства в селекторе :root.

Глобальные переменные в CSS позволят нам определить переменные темы так, чтобы несколько компонентов могли использовать одно и то же.

Вот, пожалуйста:

приложение / style.css

:root {
  --primary-color: #fff;
  --background-color: #e5e5e5;
  --text-color: #2d2d2d;
}

Чтобы определить пользовательское свойство CSS, добавьте к нему два префикса '-', например --text-color:#2d2d2d.

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

приложение / заголовок / header.component.css

:host {
background-color: var(--primary-color);
color: var(--text-color);
}

Answer 3

Смотрите, если вы используете переменные css, то это должно быть определено в некотором файле css или в том же файле в блоке :root{}.

:root{
  --background: grey;
}

body {
  background: var(--background, red); 
  /* "red" is the fallback if --background is not defined anywhere.*/
}

или что-то вроде:

theme.css

:root{
   /* define all the variable here */
}

style.css

@import url('theme.css');

body{
    background: var(--background, red);
}