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

Question

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

Answer 1

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

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

Answer 2

Вы можете использовать пользовательские свойства CSS для динамического изменения значения CSS.

Настройка e. г. в конструкторе 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 взгляните на этот ответ .