Я бы порекомендовал следовать общей форме веб-сайта Angular Material: https://github.com/angular/material.angular.io/blob/master/angular.json. Стоит клонировать этот репо и поиграть с ним локально.Есть несколько движущихся частей.
В вашем файле angular.json вы добавите CSS следующим образом.Обратите внимание, что вам нужно будет скомпилировать ваш scss в css отдельно, чтобы это работало.Они делают это в скрипте tools/build-theme.sh.:
{
"input": "src/assets/customer-1-theme.css",
"lazy": true,
"bundleName": "customer-1-theme"
},
{
"input": "src/assets/customer-2-theme.css",
"lazy": true,
"bundleName": "customer-2-theme"
},
Затем посмотрите на их менеджер стилей: https://github.com/angular/material.angular.io/blob/master/src/app/shared/style-manager/style-manager.ts
Вы создадите функцию для динамического добавления и удаления этой таблицы стилей по мере необходимости:
function createLinkElementWithKey(key: string) {
const linkEl = document.createElement('link');
linkEl.setAttribute('rel', 'stylesheet');
linkEl.classList.add(getClassNameForKey(key));
document.head.appendChild(linkEl);
return linkEl;
}
Затем в ThemePicker вы настроите наблюдаемое для управления настройкой и удалением темы.Смотрите (https://github.com/angular/material.angular.io/blob/master/src/app/shared/theme-picker/theme-picker.ts):
installTheme(themeName: string) {
const theme = this.themes.find(currentTheme => currentTheme.name === themeName);
if (!theme) {
return;
}
this.currentTheme = theme;
if (theme.isDefault) {
this.styleManager.removeStyle('theme');
} else {
this.styleManager.setStyle('theme', `assets/${theme.name}.css`);
}
if (this.currentTheme) {
this._themeStorage.storeTheme(this.currentTheme);
}
}
Лично я пошел по этому пути немного по-другому, но это означало, что scss компилируется в один файл css, и класс выбирается динамически. Их путь добавляет дополнительную сборкушаг, но допускает отложенную загрузку скомпилированного scss.
Управление глобальными стилями
В их файле angular.json вы заметите, что у них есть main.scssкоторый используется независимо от того, какой вторичный стиль выбран. Этот файл будет обрабатывать любые глобальные темы, которые вам нужны. Обратите внимание, что в main.scss они импортируют несколько Sass partials. Они позволяют им устанавливать глобальные стили для любой темы. Вы можете узнать, как этиосновная причина того, что они используют партиалы, заключается в том, что они могут передавать переменные из вторичных файлов sass в эти партиалы с помощью mixins.
@mixin material-docs-app-theme($theme) {
$primary: map-get($theme, primary);
.docs-primary-header {
background: mat-color($primary);
map-get - это функция Sass, котораяпозволяет вам определять объект и использовать его значения в Mixins. У материального дизайна есть функция sass, которую они используют здесь, но вы могли быиспользуйте более простой метод, возьмите пользовательский цвет в вашем файле main.scss.В вашем стиле style-a / style-b scss создайте собственную тему.
$my-custom-theme: (
background-color: #ffff,
button-background: rgba(200, 200, 200, 0.6),
foreground: #34383c
);
Затем вы измените их @include на:
@include material-docs-app-theme($theme, $my-custom-theme);
material-docs-app-Тематический миксин изменится на:
@mixin material-docs-app-theme($theme, $my-custom-theme) {
$background-color: map-get($my-custom-theme, background-color);
.our-background {
background-color: $background-color;
}
Это позволяет вам определять собственные цвета в отдельных загруженных лентами стилей и размещать их в глобальном файле main.scss.Mixins и Partials от Sass делают это возможным.