ASP.NET核心Angular生产环境错误CSS

Question

我正在使用 Angular 模板开发 ASP.NET 核心 WebAPI 应用程序（初始 Angular 应用程序由 ASP.NET 生成）。

当我在本地运行应用程序时，一切都按预期工作。但是，已发布的应用会收到一个额外的 CSS，这会严重破坏布局。我最好的假设是产品构建做了一些它不应该做的事情（或者只是我不希望它做的事情）。

这是添加到生产版本中的 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

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

ASP.NET核心Angular生产环境错误CSS

ASP.NET Core Angular wrong CSS in production environment

angular

asp.net-core-3.1

angularbuild