Я пытаюсь выучить их на Angular 7, используя SCSS.Мой подход заключается в том, чтобы сохранить скомпилированные минимизированные css-файлы в папке (например, активах) и щелкнуть по кнопке, добавить ссылку в заголовок страницы и переопределить тему.и нажмите другую кнопку, чтобы вернуть тему по умолчаниючто-то вроде:
changeTheme() {
let head = document.querySelector("head");
let styleNode = document.createElement('link');
styleNode.setAttribute('href', 'assets/mytheme.css');
styleNode.setAttribute('rel', 'stylesheet');
console.log(document.querySelector('link').href);
document.querySelectorAll('link').forEach(a => {
if (a.href.includes('http://localhost:4200/assets')) {
head.removeChild(a);
}
})
head.appendChild(styleNode);
}
changeToDefault() {
let head = document.querySelector("head");
let styleNode = document.createElement('link');
document.querySelectorAll('link').forEach(a => {
if (a.href.includes('http://localhost:4200/assets')) {
head.removeChild(a);
}
})
}
Это прекрасно работает, когда файлы scss находятся снаружи в отдельной папке, и я импортирую их все в глобальный файл scss.Проблема возникает, когда файлы scss находятся на уровне компонентов.В скомпилированном, уменьшенном окончательном файле css после сборки углового приложения, по-видимому, находятся только глобальные свойства css.Мой вопрос: где находятся свойства css уровня компонента, и мы можем не применять их, если файлы scss находятся на уровне компонента?