Angular 构建使用 <style> 标签生成 index.html答案

【问题标题】：Angular build generates index.html with <style> tagAngular 构建使用 <style> 标签生成 index.html
【发布时间】：2022-05-09 23:54:24
【问题描述】：

我的构建过程生成带有标签<style> 的index.html，但由于我使用CSP，我不想插入到我的代码中style-src 'unsafe-inline' 它不适合我。

我在 angular.json 中的样式如下所示：

"styles": [
              "src/styles/fonts.scss",
              "src/styles.css",
              "src/styles/app.scss",
              "./node_modules/font-awesome/css/font-awesome.css"
            ],

构建后，我看到 index.html 中的文件内容：

...

<style>@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i);:root{--blue:#007bff;--indigo:#6610f2;--purple:#7416f5;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#fffd64;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#023cc1;--secondary:#ddd;--success:#28a745;--info:#17a2b8;--warning:#fffd64;--danger:#dc3545;--light:#f8f9fa;--dark:#222326;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--breakpoint-xxl:1400px;--breakpoint-xxxl:1600px;--font-family-sans-serif:"Roboto",sans-serif;--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:rgba(0,0,0,0)}body{margin:0;font-family:Roboto,sans-serif;font-size:1rem;font-weight:400;line-height:1.25;color:#222326;text-align:left;background-color:#edf0f5}@media print{*,:after,:before{text-shadow:none!important;box-shadow:none!important}@page{size:a3}body{min-width:992px!important}}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem}</style><link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript></head>

....

如何避免 index.html 中的内联样式？

【问题讨论】：

暂时没有好的解决方案：github.com/angular/angular/issues/26152
我建议您尝试github.com/angular/angular-cli/issues/… 中解释的解决方案。我对你的结果很感兴趣。
需要详细检查，虽然优化：错误工作并且没有创建内联脚本。 tmp 解决方法。

标签： html angular build content-security-policy

【解决方案1】：

我找到了详细的解决方案in this post：您可以更改 angular.json 中的 optimization 布尔属性并指定它以避免内联关键 css 规则：

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

角度优化配置说明here

【讨论】：