Angular产生多个重复的内联样式

Question

我希望了解一些Web应用程序样式的问题。我有一个为学生创建的简单网站，一切正常，但是当我运行ng serve和或使用prod进行构建时，页面源中出现了一些重复的样式。

所有样式都是重复的，我不确定我做错了什么。我尝试了各种解决方案，但似乎找不到开箱即用的解决方案。 我摆脱重复样式的唯一方法是将所有内容导入styles.css中，而不在组件中使用styleUrls：[“ ./nameof.component.scss”] 。

奇怪的是，当我在编辑器中构建后查看index.html文件的内容时，这些样式标记就不在其中。我知道这是一个非常棘手的问题，尤其是没有笨拙的例子或我无法提供的示例。任何想法/协助将不胜感激。

架构概述

_base.scss 包含以下所有导入，这些导入都是scss的一部分，根据我的最佳实践/规范，我只是在导入名称中省略了下划线：

@import "variables";
@import "bootstrap";
@import "mixins";

styles.css ，这不是局部的，而导入的基是局部的，就像这样：

@import "base";

构成网站的所有组件也都导入了_base.scss，因为我需要利用各种东西，例如变量，函数和引导网格混合等等。

在角度配置文件中，我在styles数组的Architect对象中具有以下内容：

"styles": [
  "src/scss/styles.scss"
]

在配置对象的同一配置文件中，我具有以下内容：

      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": true,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": true,
          "buildOptimizer": true
        }
      }