ASP.NET Core Angular wrong CSS in production environment

I am developing an ASP.NET Core WebAPI application with Angular template (the initial Angular app is generated by ASP.NET).

When I run the app locally, everything works as expected. But, a published app receives an extra CSS which breaks the layout significantly. My best assumption is that the prod build does something it's not supposed to (or just something I don't want it to do).

This is the CSS that gets added to production build:

<style>
@charset "UTF-8";
:root{
    --blue:#007bff;
    --indigo:#6610f2;
    --purple:#6f42c1;
    --pink:#e83e8c;
    --red:#dc3545;
    --orange:#fd7e14;
    --yellow:#ffc107;
    --green:#28a745;
    --teal:#20c997;
    --cyan:#17a2b8;
    --white:#fff;
    --gray:#6c757d;
    --gray-dark:#343a40;
    --primary:#007bff;
    --secondary:#6c757d;
    --success:#28a745;
    --info:#17a2b8;
    --warning:#ffc107;
    --danger:#dc3545;
    --light:#f8f9fa;
    --dark:#343a40;
    --breakpoint-xs:0;
    --breakpoint-sm:576px;
    --breakpoint-md:768px;
    --breakpoint-lg:992px;
    --breakpoint-xl:1200px;
    --font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
*,:after,:before{box-sizing:border-box;}
html{
    font-family:sans-serif;
    line-height:1.15;
    -webkit-text-size-adjust:100%;
    -webkit-tap-highlight-color:transparent;
}
body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-size:1rem;
    font-weight:400;
    line-height:1.5;
    color:#212529;
    text-align:left;
    background-color:#fff;
}
@page {size:a3;}
body{min-width:992px!important;}
</style>

And this is the styles property in angular.json:

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/open-iconic/font/css/open-iconic-bootstrap.min.css",
              "node_modules/primeng/resources/themes/saga-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeicons/primeicons.css",
              "src/styles.css"
            ]

I've seen some old threads about prod build messing up the CSS order, but the fixes are now deprecated.

Any idea how this happens? Is there anything I can do to prevent it?

Solved it by adding "extractCss": false to my projects.MyProject.architect.build.configurations object in angular.json.