是否可以构建没有嵌入样式的 Angular 应用程序？答案

【问题标题】：Is it possible to build an Angular app without embedded styles?是否可以构建没有嵌入样式的 Angular 应用程序？
【发布时间】：2022-05-05 00:14:24
【问题描述】：

我的公司正在进行品牌重塑，这涉及到我们的应用程序的一些颜色更改。其中大部分只是调整 SCSS 变量，但我希望能够使用“主题切换器”演示应用程序，在这里我可以在 2 个样式表之间切换。

我两次构建了应用程序 - 一次使用旧的 SCSS 变量，一次使用新的。但是，在两个样式表之间切换时，由于<head> 中嵌入了样式，更改并没有完全体现出来

我搜索了很多，似乎没有其他人问这个问题。有谁知道如何摆脱这些并将它们包含在样式表中（在构建期间使用--extract-css），甚至为什么将某些样式提取到样式表中以及为什么某些样式包含在嵌入样式中？

如果需要，我的 angular.json 的相关部分如下。

"projects": {
    "cd": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/cd",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "src/styles.scss",
              {
                // I put this in here thinking I could re-declare all the color variables in newtheme.scss and when the bundle was created it would rewrite all of the styles that used those variables too. No dice. 
                "input": "src/assets/css/newtheme.scss",
                "bundleName": "newtheme",
                "inject": false
              }
            ],
            "stylePreprocessorOptions": {
              "includePaths": ["src/assets/css"]
            },
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },

【问题讨论】：

只是好奇什么嵌入式头部样式？
@JohnPeters 在我的中，我有大约 35 个

标签： angular sass angular-cli

【解决方案1】：

我意识到我的应用也在做同样的事情。

我遇到了几个与使用 scss/sass 相关的问题，并获得了与预期不同的结果。

对/assets/* 的引用会导致构建有时将它们放在dist/project/ 文件夹的根目录中。这似乎也导致与已经存在的文件重复。我对此的看法是，因为 CSS 加载在 HTML 的根目录中，所以它应该有一个 ./asset 到文件夹的相对路径，而不是 '/asset' 根 Linux 服务器，或者取决于应用程序的托管方式最终会导致一些问题。 --base-href=./ 至少在我的构建中对这些最终的 css 结果没有任何作用。我认为他们这样做可能是为了缓存清除。但是，如果网站碰巧在子目录等中更便于移植，对我来说，任何 /asset 参考都会导致字体加载等问题。
（您的问题）文档中还有一个优化/摇树选项不是开箱即用的。见https://angular.io/guide/workspace-config#optimization-configuration

angular.json

...
"outputHashing": "all",
"optimization": {
    "scripts": true,
    "styles": {
        "minify": true,
        "inlineCritical": false <---- this
    },
    "fonts": true
}
...

这解决了<head> 中<styles> 的内联重复，但我仍然有几个图像在项目的根目录中被散列。（观点）这是世界末日吗？不。是混乱的。是的。

我执行的一个解决方法是将 /asset 引用更改为 ^asset/，因为我主要使用 S3/CloudFront 并使缓存无效。

【讨论】：