Изменить переменную темы Angular Material при сборке

Мне нужно настроить приложение angular 6 для изменения основного цвета в зависимости от сборки (мне нужно изменить основной цвет на другой при разработке и производстве). Есть ли какое-нибудь простое решение для изменения цвета при сборке?


javascript angular sass angular6 angular-material-6
person Jaume    schedule 03.07.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете использовать пользовательские свойства css, чтобы изменить css значение динамически.

Настройка эл. грамм. в конструкторе AppModule:

let primaryColor: string;
if (environment.production) {
  primaryColor = 'green';
} else {
  primaryColor = 'red';
}
document.documentElement.style.setProperty('--primary-color', primaryColor);

А затем используйте значение в вашем css с помощью:

color: var(--primary-color)

Для решения SASS посмотрите этот ответ.

person Kim Kern    schedule 03.07.2018
comment
Большой! Решение SASS — это то, что я искал! Большое спасибо :) - person Jaume; 03.07.2018

arrow_upward
2
arrow_downward

Пожалуйста, проверьте эту сообщенную проблему, кажется, что версия 6.1 будет поддерживать замену файлов другими чем просто машинописные файлы.

Если да, вы сможете заменить свой my-own-theme.scss в зависимости от профиля конфигурации. (определено внутри angular.json)

person Thierry Falvo    schedule 03.07.2018