натолкнулся на небольшую проблему со стилями моих веб-приложений, о которой я надеялся получить некоторое представление. У меня есть простой сайт, который я создал для своих учеников, все работает нормально, но я заметил несколько дублированных стилей в исходном коде страницы, когда я запускаю ng serve и / или запускаю сборку с помощью prod.
Все стили дублированы, и я не уверен, что делаю неправильно. Я пробовал различные решения и не могу найти решение, которое работает из коробки. Единственный способ избавиться от дублированных стилей - это импортировать все в styles.css и не использовать styleUrls: ["./nameof.component.scss"] в компонентах .
Странно то, что когда я смотрю содержимое файла index.html после сборки в моем редакторе, эти теги стилей там отсутствуют. Я понимаю, что это довольно загруженный вопрос, особенно без плунжера или примера, который, к сожалению, я не могу предоставить. Любые идеи / помощь будет принята с благодарностью.
Обзор архитектуры
_base.scss , который содержит следующие операции импорта, являющиеся частями scss. Я только что пропустил подчеркивание в имени импорта, поскольку, как я понимаю, это наилучшая практика / норма:
@import "variables";
@import "bootstrap";
@import "mixins";
styles.css это не частичное и импортирует основание, которое является частичным, вот так:
@import "base";
Все мои компоненты, составляющие сайт, также импортируют _base.scss, так как мне нужно использовать различные вещи, такие как переменные, функции, начальные миксы для сетки и т. Д.
В угловом конфигурационном файле У меня есть следующее в объекте architect в массиве styles:
"styles": [
"src/scss/styles.scss"
]
В том же файле конфигурации в объекте конфигурации у меня есть следующее:
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": true,
"aot": true,
"extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": true
}
}