0

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.jsonstylesのプロパティです:

"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 ビルドに関する古いスレッドで CSS の順序が台無しになっているのを見たことがありますが、修正は現在非推奨です。

これがどのように起こるか考えていますか？それを防ぐために私にできることはありますか？

4

1 に答える 1