Импортировать переменные из .ts в .scss angular

Question

Я разрабатываю угловой компонент, и я хотел бы импортировать в мой файл scss переменные (например, цвета) из моего файла ts, и я собираюсь решить некоторые проблемы.Я видел несколько примеров с node-sass и webpack, но мне они не очень понятны.Спасибо

Answer 1

Невозможно импортировать переменные в файлы scss из файлов ts.Вместо этого вы можете использовать угловые свойства ngStyle и ngClass

Answer 2

Один из вариантов: Переменные CSS .

Это не переменная SASS, доступная при предварительной обработке, а скорее доступная в браузере во время выполнения.Поэтому вы можете получить / установить его с помощью javascript, и стиль CSS будет обновляться в зависимости от значения переменной.

Например, допустим, ваш компонент позволяет вам устанавливать цвет текста с помощью переменной javascript textColor:

CSS:

p { color: var(--text-color); }

JS:

element.style.setProperty("--text-color", textColor);

Убедитесь, что эта функция имеетУровень поддержки браузера вашего приложения.

Answer 3

вы пробовали ngStyle

 <some-element [ngStyle]="{'color': styleExp}">...</some-element>

, а затем в вашем .ts

 styleExp = 'red' 

вы можете прочитать об этом в официальных документах https://angular.io/api/common/NgStyle