超出ANGULAR中SCSS文件的最大预算时出现警告

Question

​

​

正在导入scss文件中的引导程序变量，在超出B:/Angular-8/crats-shop/src/app/shared/components/sort/sort.component.scss.的最大预算时收到错误警告预算6 kB达不到136%的kB，总共142个kB

Answer 1

预算是一组对影响站点性能的特定值的限制

打开angular.json文件，找到预算关键字和增值表

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

Answer 2

即使你可以突破自己的极限，但这可能不是你真正想做的事情。限制存在是有原因的。如果可能，首先应该尽量避免超过它们。

对我来说，问题是我在组件的SCSS文件中导入了我的主题文件(它非常大)。

@import "src/my-theme";

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

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

在你的主题文件中，让CSS变量像这样：:root { --primary-color: #11dd11; }

• remove从你的其他

1. 文件中导入，并使用下面的代码来获取你的颜色：var(--primary-color)

Answer 3

打开angular.json文件，找到anyComponentStyle类型的预算关键字和增量值

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