Стили не применяются в браузерах на базе Chromium

Я работаю над проектом, использующим Angular в качестве платформы FE. У меня есть простая настройка проекта следующим образом:

В файл angular.json я импортирую эти файлы:

 "styles": [
    "src/import.scss",
    "node_modules/ngx-toastr/toastr.css"
 ]

содержимое import.scss следующее:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

@import 'assets/style/palette.scss';
@import 'assets/style/const.scss';

@import 'assets/style/generic.scss';
@import 'assets/style/modal.scss';

@import 'assets/style/browser-override.scss';
@import 'assets/style/_material-override.scss';

@import 'assets/style/components.scss';
@import 'assets/style/table.scss';
@import 'assets/style/grid.scss';
@import 'assets/style/page.scss';
@import 'assets/style/flex.scss';

@import 'assets/style/_spinner.scss';

Я всегда использую этот подход, поэтому мне не нужно редактировать раздел стиля в файле angular.json каждый раз, когда я что-то добавляю/удаляю; плюс, мне не нужно каждый раз останавливаться и начинать подачу. Всегда работало без проблем. В этом проекте этого просто нет.

Если в Firefox все в порядке, то в Brave или Chrome все просто не работает. Например, файл modal.scss содержит следующие правила:

.modal-content {
   color: red;
   display: flex;
}

.modal-content-vertical {
    flex-direction: column;
}

и во всем моем модальном html-шаблоне у меня есть такая структура:

<div class = "modal-content modal-content-vertical">
...
</div>

В результате в Chrome/Brave все свойства, определенные в modal-content-vertical, не применяются. Как будто браузер не может найти определение этого класса.

Это еще один пример:

Как видите, homepage-filter (homepage.comComponents.scss) и content-padded (page.scss) работают нормально.

Теперь вот что происходит в Chrome:

Как видите homepage-filter верно. Но content-padded отсутствует. Кроме того, даже browser-override отсутствует.

Другой пример, который не имеет никакого смысла: в файле переопределения браузера у меня есть это правило:

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    transition: all 0s ease-in-out;
    box-sizing: border-box;
    font-family: 'font-primary', Arial, Helvetica, sans-serif;
}

Если я проверю какой-либо элемент в Firefox (заголовок ошибки в примере), я увижу, что приведенное выше правило применяется и взято из правильного файла:

В Brave/chrome почему-то написано, что оно взято из модального файла в строке 40:

Для контекста строка 40 в модальном файле:

 .modal-content {
        flex: 1;
        background-color: var(--color-light);
        color: var(--color-hard);
        padding: var(--pm-normal); <---- line 40
        overflow-y: auto;
        position: relative;
}

Я использую Angular 17:

"dependencies": {
        "@angular/animations": "17.0.0",
        "@angular/cdk": "17.0.0",
        "@angular/common": "17.0.0",
        "@angular/compiler": "17.0.0",
        "@angular/material": "17.0.0",
        "@angular/core": "17.0.0",
        "@angular/forms": "17.0.0",
        "@angular/platform-browser": "17.0.0",
        "@angular/platform-browser-dynamic": "17.0.0",
        "@angular/router": "17.0.0",
        "angular-oauth2-oidc": "17.0.1",
        "rxjs": "7.8.0",
        "tslib": "2.3.0",
        "ngx-toastr": "18.0.0",
        "zone.js": "0.14.2"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "17.3.4",
        "@angular/cli": "17.0.3",
        "@angular/compiler-cli": "17.0.0",
        "typescript": "5.2.2"
    }

Я понятия не имею, почему это происходит. Сначала я подумал, что это проблема браузера, но любой другой сайт работает нормально.

Есть идеи?

=== РЕДАКТИРОВАТЬ ===

После некоторого расследования я обнаружил, что когда Chrome генерирует файл style.css, он удаляет много материала. Например, при загрузке приложения я вижу на вкладке «Сеть», что файл правильно используется:

однако я поместил puf в программу проверки различий файл style.css из Chrome и файл из Firefox, я вижу это:

Важно отметить, что справа (Firefox) у меня есть определение modal-content-vertical, а слева (Chrome) нет. Я искал по всему определению и нашел только одно совпадение для моего класса.

Могу ли я остановить это? Это не имеет никакого смысла.