Глобальные переменные scss для компонентов Angular без их импорта каждый раз

Question

У меня уже есть переменные SCSS, определенные в src/styles/settings/_variables.scss, и я импортирую их в src/styles.scss, но все же эти переменные не доступны для каждого компонента.

Есть ли способ сделатьглобальный файл, который содержит все переменные SCSS для остальных моих компонентов?Поскольку запись @import в каждый файл компонента .scss очень расстраивает, особенно если у меня много вложенных компонентов.

Я знаю, что есть много похожих вопросов, но кажется, что онивсе устаревшие и не относятся к последним версиям Angular.

Я использую Angular 7.3 с CLI.

Answer 1

Вам просто нужно добавить немного больше настроек, поэтому, когда вы объявляете свои глобальные переменные, вам нужно заключить их в :root{}. Так что в src/styles/settings/_variables.scss.

:root 
{
--blue: #00b; // or any global you wish to share with components 
}

Тогда, когда вы используете их в SCSS, вам нужно будет получить к ним доступ следующим образом.

.example-class {
  background-color: var(--blue)
}

Чтобы добавить это к комментариям, этот метод может использовать mixins, @media и keyframes и не ограничивается только цветами / шрифтом. Это был пример.

Насколько я понимаю, вам нужен глобальный файл src/assets/style/global, а затем импортировать каждый файл scss туда, где вы их определяете следующим образом.

@import 'filename';

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

Вот как мой текущий проект работает с глобальными переменными, и, похоже, он работает хорошо. Это избавит от необходимости импортировать переменные в каждый файл scss, который вы используете. Комментарий, если у вас есть какие-либо проблемы, BR.

Answer 2

Есть ли способы сделать глобальный файл с переменными scss доступным для всех компонентов?

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

Как это работает в SASS , если вы используете партиалы для лучшей организации кода, вы можете применить директиву @import для ссылок. Так что если в shared/_variables.scss есть некоторые переменные sass:

$lightslategray: #778899;
$darkgray: #A9A9A9;

и эти переменные необходимо использовать в другой таблице стилей, в первую очередь в нее должна быть @ import-ed таблица стилей с ними:

// Shared
@import "shared/variables";

.content {
  background: $lightslategray;
}

В Angular это работает аналогичным образом (связано со ссылкой на внешнюю таблицу стилей). Поэтому, если вам нужно, чтобы sass variables, mixins or functions использовался каким-то конкретным component.scss, другого чистого способа не существует, кроме как ссылаться на них в этом component.scss с использованием директивы @import. Чтобы облегчить задачу, вы можете создать файл src/_variables.scss и использовать такой синтаксис в вашем component.scss:

@import “~variables.scss”;

Answer 3

TL; DR

Нет, в Angular нет пути лучше , и более удобного способа решения вашей проблемы не будет.

Более подробный ответ

Если я вас правильно понял, вы запутались со всеми этими инъекциями зависимостей, например @import конкретным SCSS, содержащим ваши переменные.Итак, ваш вопрос:

Это ошибка или функция?

И, я должен сказать, это функция.Это делает ваши компоненты более гибкими, и выгода в том, что вам нужно заботиться об этих зависимостях, но в долгосрочной перспективе ваш код будет легче поддерживать и будет более структурированным.Зависимость является основной особенностью современного программирования на JavaScript.Так что, если хотите, вы можете придерживаться более старомодного стиля программирования, помещая все, что вам нужно для вашего приложения, в один файл.Это скорее своего рода риторический вопрос.

Если вы посмотрите, например, на «Реагирующий мир», вы обнаружите еще большую необходимость структурировать свои инъекции.Вы не просто импортируете весь файл и обслуживаете все переменные, методы, классы и т. Д. В свой целевой компонент, но вместо этого выбираете каждую переменную, каждый отдельный метод, который вы хотели бы использовать в своем целевом компоненте.Это увеличивает усилия по планированию и структурированию всего вашего приложения, но имейте в виду, в долгосрочной перспективе.Программирование хорошего поддерживаемого программного обеспечения имеет больше общего с марафоном, чем спринтом.

Я хотел бы поделиться с вами этой статьей Википедии о «Внедрении зависимости» .Может быть, вы найдете там свои ответы.

Мотивация

Чтобы не дать вам оставить плохие чувства, вот замечательное высказывание HL Mencken :

„Для каждой сложной проблемы есть ответ, который является ясным, простым и неправильным.“