Наследование CSS в Angular

Question

Я начинаю работать с Angular и пытаюсь выяснить, как файл styles.scss работает с отдельными файлами css в папках компонентов.Я знаю, что styles.scss загружается, когда приложение загружается, я могу видеть подходящие стили там, где это необходимо, но мы также добавляем другую таблицу стилей вверху, например:

@import "./assets/styles/general-theme.css";

Далее в стилях.scss Я объявляю переменную для хранения шрифта, который мы хотим использовать:

$font-stack: Roboto, Arial, Helvetica, sans-serif;

И затем с помощью * добавляю этот шрифт к каждому элементу:

* {
font-family: $font-stack;
}

И используюэто работает в styles.scss, который работает, но, похоже, мне нужно либо объявить другую переменную в таблице стилей общей темы, либо явно указать шрифт.Я не могу представить, что мы когда-либо будем использовать более одного шрифта, поэтому я чувствую, что это должно работать для того, что мы пытаемся сделать.Это похоже на разумный способ сделать это?

Answer 1

Общий файл переменных scss можно использовать везде, где нужно импортировать , прежде чем использовать любую переменную, и он доступен в любом файле scss в вашем случае, так как @ Pete упоминает вас простоперед импортом темы необходимо включить оператор импорта

styles.scss

@import "./theme/_variables";
@import "./theme/_general-theme";
...

, иначе можно поместить оператор импорта для переменных внутри темыfile

_general-theme.scss

@import "_variables";
...

главное правило - импортировать файл _variables.scss, прежде чем использовать какие-либо переменные, даже если вы можете использовать _variables внутри любогофайл стиля компонента, если он scss

app.component.scss

@import "../theme/_variables";

p {
  font-family: Lato;
  color:$s-color;
  text-shadow: $text-shadow;
}

демонстрация stackblitz ??