У меня стандартное angular 9 приложение с тематикой материала. Мы столкнулись с проблемой увеличения размеров пакетов и обнаружили, что наше повторное использование стилей s css вызывает это увеличение. Проблема заключалась в том, что импортированный s css был скомпилирован в компоненте, как указано в этом блоге .
Изначально мы хотели повторно использовать переменные заголовка материала следующим образом в наших angular компонентах
@import './theme.scss';
test{ background-color: mat-color($app-primary) }
Для решения этой проблемы мы следовали совету blogs . такой код, как глобальный стиль или использование sass mixins. Мы реализовали sass-mixins следующим образом и повторно использовали его в наших стилях компонентов:
@mixin primary-background-color {
background-color: mat-color($app-primary);
}
@import 'mixins.scss'
.test {
@include primary-background-color;
}
Тем не менее, следуя этому совету, размеры комплекта немного уменьшились при использовании sass-mixins, но не так сильно как мы переместили бы весь код в стиль gobal.
В связи с этим возникает мой вопрос: рекомендуется ли использовать цвета темы материала для повторного использования в стилях компонентов? Я не могу поверить, что «решение» моей проблемы заключается в переводе стилей компонентов в глобальный стиль!?
Ждем полезных помощников! Ура!