Angular 构建索引文件：注入的样式从何而来？

Question

我有一个 Angular 应用程序，刚刚完成从 v7 到 v12 的迁移。我使用我自己的自定义索引文件（也许这没有什么区别），即我的 angular.json 文件中有以下内容......

"projects": {
"routes": {      
  "architect": {
    "build": {          
      "configurations": {            
        "production": {
          "index": "src/index.aspx",  // <---- my index file

当我构建时，复制该文件，注入 Angular 包等，它还添加了长样式

<style>@charset "UTF-8";:root{--blue:#628aba;--indigo:#510fbd;--purple:#5a379b;--pink:#e83e8c;--red:#a11422;--orange:#ce640d;--yellow:#ffff85;--green:#178f33;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#757575;--gray-dark:#3b3b3b;--primary:#628aba;--secondary:#b5b5b5;--success:#178f33;--info:#17a2b8;--warning:#ffff85;--danger:#a11422;--light:#fafafa;--dark:#3b3b3b;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:Tahoma,Verdana,Arial,Helvetica sans-serif;--font-family-monospace:Consolas,"Courier New",SFMono-Regular,Menlo,Monaco,"Liberation Mono",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:rgba(0,0,0,0);}body{font-size:1rem;font-weight:400;line-height:1.5;color:#000;text-align:left;background-color:#fff;}@page {size:a3;}body{min-width:992px!important;}</style><link rel="stylesheet" href="styles.86e8f850c5457bf98a6f.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.86e8f850c5457bf98a6f.css"></noscript>

我想知道这是从哪里来的？这是来自全球的吗styles.scss？我不会承认我styles.scss链接到的其他样式不是我自己完成的（例如 Angular 材料）

我的一个问题是，在我不知不觉中，已经包括

body{min-width:992px!important;}

所以我试图弄清楚这是从哪里来的，因为我不想要它。我浏览了我们所有共享的等样式，但在任何地方都找不到这个。又搜遍了materialsnode_modules文件夹，没有找到。

现在我在body元素上覆盖它，但想知道所有这些来自哪里？

Answer 1

它来自inlineCritical优化选项。请参阅此处的详细信息https://angular.io/guide/workspace-config#styles-optimization-options

false只需在您的文件中将其设置为angular.json：

"project": {
  "architect": {
    "build": {
      "configurations": {
        "production": {
          "optimization": {
            "scripts": true,
            "styles": {
              "minify": true,
              "inlineCritical": false
            },
            "fonts": true
          }
        }
      }
    }
  }
}