Styles not being applied in Chromium based browsers

Question

I'm working on a project using Angular as the FE framework. I've a simple project setup as following:

In the angular.json file I'm importing these files:

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

the content of import.scss is this:

@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';

I always use this approach, so I don't need to edit the style section in the angular.json file each time I add / remove something; plus, I don't need to stop and start the serve each time. It has always worked without any issue. On this project tho, it just doesn't.

While on Firefox everything is fine, on Brave or Chrome things just don't work. For example, the modal.scss file contains those rules:

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

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

and in all my modal html template I have a structure like this:

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

The result is that in Chrome / Brave, all the properties defined in modal-content-vertical aren't applied. Is like the browser can't find that class definition.

This is another example :

As you can see, homepage-filter (homepage.components.scss) and content-padded (page.scss) works fine.

Now, this is what happens in chrome instead:

As you can see homepage-filter is correct. But content-padded is missing. Also, even the browser-override is missing.

Another example that doesn't make any sense is that: in the browser-override file I have this rule:

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

If I inspect any element in Firefox (error-title in the example) I see that the rule above is applied and is taken from the correct file:

In Brave / chrome, somehow it says it is taken from the modal file at line 40 :

For context, line 40 in the modal file is

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

I'm using 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"
    }

I have no idea why is this happening. Initially I tough it was a browser problem but any other site works fine.

Any idea?

=== EDIT ===

After some investigation I found that when Chrome generates the style.css file is removing a lot of stuff. For instance, when loading the application I can see in the Network tab that the file is correctly getting used:

however I put puf in a diff checker the style.css file from chrome and the one from firefox, I see this :

What's important to see is that in the right (Firefox) I have the definition of modal-content-vertical whilst not in the left (Chrome). I searched in the whole definition and there's just one match for my class.

Can I stop this? It makes no sense.

Answer 1

You are using the local overrides feature of DevTools, as indicated by the purple dot in the network tab. So basically you are telling the browser to use your local version of the file and don't use the one from the server. It seems like the local version is outdated.

To fix it, go to the "Sources" -> "Overrides" and uncheck "Enable Local Overrides".

Also pay attention the the exclamation mark icon in the "Network" tab, it warns you about the local overrides.

Note that this is only an issue with devtools opened. After closing the devtools, the local overrides are disabled by default.