WARNING in Exceeded maximum budget for SCSS FILE IN ANGULAR答案

【问题标题】：WARNING in Exceeded maximum budget for SCSS FILE IN ANGULARWARNING in Exceeded maximum budget for SCSS FILE IN ANGULAR
【发布时间】：2020-08-02 01:41:04
【问题描述】：

在 scss 文件中导入引导变量出现错误警告 B:/Angular-8/crats-shop/src/app/shared/components/sort/sort.component.scss 超出最大预算。预算 6 kB 没有被 136 kB 满足，总共 142 kB

【问题讨论】：

标签： angular bootstrap-4

【解决方案1】：

预算是对影响网站性能的某些值的一组限制

打开angular.json文件，找到budgets关键字并增加值

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "4mb", <===
      "maximumError": "5mb"
   },
   {
      "type": "anyComponentStyle",
      "maximumWarning": "150kb",
      "maximumError": "150kb"
   }
]

【讨论】：

您知道如何实际分析组件的样式包吗？似乎唯一的解决方案就是提高标准，而不是真正找出导致捆绑包变得如此之大的原因。

【解决方案2】：

即使您可以提高自己的极限，也可能不是您想要做的。限制是有原因的。如果可能的话，你应该尽量避免超过它们。

对我来说，问题是我将我的主题文件（非常大）导入到组件的 SCSS 文件中。

@import "src/my-theme";

唯一的原因是我需要访问这些文件中的 SCSS 颜色变量。以多种样式导入任何较大的文件只是为了访问一些变量是一个糟糕的主意；您的应用程序将变得庞大且加载速度非常慢。

如果你只需要访问你的变量，我建议这个解决方案：

在你的主题文件中，使 CSS 变量像这样：:root { --primary-color: #11dd11; }
从您的其他 SCSS 文件中删除导入并使用它来获取您的颜色：var(--primary-color)

【讨论】：

有趣，我也有同样的问题，但这不是官方文档建议做的 - material.angular.io/guide/… ？
我也做了同样的事情。我尝试删除 sass 导入并使用您建议的 css 变量，但大小相同。
这很有趣。在我的情况下，这有很大的不同。我的主题文件相当大，因此在每个其他 scss 文件中导入它会导致所有文件都非常大。如果您超出预算一点点，不要害怕增加一点，这没什么大不了的。在某些项目中，我也必须增加它......
我通常会创建一个与我的 theme.scss 分开的 _variables.scss 文件，并且我只将 _variables.scss 导入到其他 scss 文件中。
@HasanAboShally 这很好地限制了导入的 SCSS 规则（即大小）的数量。但是，导入 _variable.scss 的每个组件都会复制它们（如果您使用延迟加载，还不错，但仍然不理想）。 kozenka 的解决方案确实避免了在多个组件中复制 .scss。

【解决方案3】：

打开angular.json文件，找到budgets关键字，增加anyComponentStyle类型的值：

{
  "type": "anyComponentStyle",
  "maximumWarning": "150kb",
  "maximumError": "150kb"
}

【讨论】：