生产环境中的 ASP.NET Core Angular 错误 CSS

Question

我正在使用 Angular 模板开发一个 ASP.NET Core WebAPI 应用程序（最初的 Angular 应用程序是由 ASP.NET 生成的）。

当我在本地运行应用程序时，一切正常。但是，已发布的应用程序会收到一个额外的 CSS，这会显着破坏布局。我最好的假设是 prod 构建做了一些它不应该做的事情（或者只是我不希望它做的事情）。

这是添加到生产构建中的 CSS：

<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>

这是 angular.json 中的 styles 属性：

"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"
            ]

我看到一些关于 prod build 的旧线程会弄乱 CSS 顺序，但现在已弃用修复。

知道这是怎么发生的吗？有什么办法可以防止吗？

Answer 1

通过在angular.json 中将"extractCss": false 添加到我的projects.MyProject.architect.build.configurations 对象来解决它。