SCSS FILE IN ANGULAR 超出最大预算中的警告

ais*_*ya 22 bootstrap-4 angular

角度误差

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

pc_*_*der 46

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

打开 angular.json 文件并找到预算关键字并增加价值

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "4mb", <===
      "maximumError": "5mb"
   },
   {
      "type": "anyComponentStyle",
      "maximumWarning": "150kb",
      "maximumError": "150kb"
   }
]
Run Code Online (Sandbox Code Playgroud)

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

小智 25

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

{
  "type": "anyComponentStyle",
  "maximumWarning": "150kb",
  "maximumError": "150kb"
}
Run Code Online (Sandbox Code Playgroud)


koz*_*nka 13

尽管您可以提高自己的极限,但这可能不是您真正想要做的。限制是有原因的。如果可能,您应该首先尝试避免它们。

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

@import "src/my-theme";
Run Code Online (Sandbox Code Playgroud)

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

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

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

  • 我通常创建一个与 theme.scss 分开的 _variables.scss 文件,并且仅将 _variables.scss 导入到其他 scss 文件中。 (6认同)
  • 有趣的是,我有完全相同的问题,但这不是官方文档建议做的 - https://material.angular.io/guide/theming-your-components#1-define-all-color-and-typography-组件的主题文件中的样式? (2认同)