Я столкнулся с той же проблемой, некоторые обсуждения можно найти здесь , а внушительный блог, посвященный проблеме здесь .
Суть в том, что - как правильно говорится в руководстве по тематике - вы никогда не должны импортировать миксины @include mat-core() и @include angular-material-theme($your-theme) более одного раза во всем проекте.Но когда вы работаете с SASS в своих компонентах, вам часто хочется ссылаться на переменные темы и цветовую палитру.Соблазнительно импортировать всю вашу тему в компонент SASS, случайно дублируя миксины материалов.
Решение, которое я выбрал, я думаю, это то, что руководство по темам описывает
определениеобъекта темы следует разбить на собственный файл, отдельно от включения mixins mat-core и angular-material-theme
, но, поскольку для меня изначально было непонятно, как это сделать,Вот шаг за шагом для тех, кто застрял с тем же:
- создайте папку
assets/styles/partials, содержащую SASS-части
Моя папка выглядит так:
assets/styles/partials/
_palette.scss // custom material palettes
_scaffolding.scss // general mixins
_theme.scss // <-- our theme definition
_variables.scss // global variables like fonts and colors
Часть _theme содержит следующее:
// assets/styles/partials/_theme.scss
@import '~@angular/material/theming';
@import 'variables';
@import 'scaffolding';
@import 'palette';
$my-primary: mat-palette($mat-primary);
$my-accent: mat-palette($mat-accent);
$my-warn: mat-palette($mat-warn);
$my-theme: mat-light-theme($my-primary, $my-accent);
Вот и все. не включать в этот файл миксины материалов mat-core и angular-material-theme.
создать глобальный файл темы
assets/styles/my-theme.scss.Он содержит всего три строки:
// assets/styles/my-theme.scss
@import 'partials/theme'; // our actual theme definition
@include mat-core(); // the required mat-core mixin
@include angular-material-theme($my-theme); // the declaration of our custom material theme
Этим мы отделили нашу частичную тему, включая всю нашу обычную палитру, леса и переменные, от файла, который включает в себя mat-core и наш пользовательский материалтема.
В Angular.json объявите файл my-theme глобальным в соответствии со стилями
"styles": [ "src/assets/styles/my-theme.scss" ]
При этом наше приложение повсеместно использует нашу собственную тему материала, а потому что определение темы (в части theme) отдельно от включения миксинов материалов (в my-theme), мы можем безопасно включать нашу часть theme в любой компонент без дублирования каких-либо css.
ОпциональноВы можете упростить импорт части нашей темы, добавив путь к частям к stylePreprocessorOptions в Angular.json:
"build": {
(...)
"options": {
(...)
"stylePreprocessorOptions": {
"includePaths": [
"src/assets/styles/partials"
]
}
}
}
Просто @import 'theme' в любом файле scss компонента, и у нас есть доступ ко всем нашим переменным иТематические функции материала, такие как mat-color:)