Angular 中的警告超出了中SCSS文件的最大预算

在scss文件中导入引导变量时出错

---

警告：B:/Angular-8/crats shop/src/app/shared/components/sort/sort.component.scss超出了最大预算。136 kB未达到预算6 kB，总计142 kB

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

---

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

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

“预算”：[
{
“类型”：“首字母”，
“maximumWarning”：“4mb”，打开angular.json文件，找到budgets关键字并增加anyComponentStyle类型的值
{
“类型”：“anyComponentStyle”，
“最大警告”：“150kb”，
“最大错误”：“150kb”
}
尽管你可以提高自己的极限，但这可能不是你真正想要做的。极限的存在是有原因的。
如果可能的话，你首先应该尽量避免它们

对我来说，问题是我正在组件的SCSS文件中导入我的主题文件（相当大）

@import "src/my-theme";

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

如果您只需要访问变量，我建议使用以下解决方案：

在主题文件中，使CSS变量如下：
：root{--primary color:#11dd11；}
从其他SCSS文件中删除导入，并使用它来获取颜色：
var（--primary color）
有趣的是，我也有完全相同的问题，但这不是官方文档建议做的-？我做了同样的事情。我尝试删除sass导入并使用css变量，就像你建议的那样，但大小相同。这很有趣。这在我的情况下产生了巨大的差异。我的主题文件相当大，所以在每个其他文件中导入它css文件导致所有的文件都非常大。如果你只是超出了预算一点，不要害怕增加一点，这不是什么大问题。在一些项目中，我也必须增加它。。。