70

angular error

IMPORTING BOOTSTRAP VARIABLE in SCSS file getting error

WARNING in Exceeded maximum budget for B:/Angular-8/crats-shop/src/app/shared/components/sort/sort.component.scss. Budget 6 kB was not met by 136 kB with a total of 142 kB
Kaneki21
  • 1,323
  • 2
  • 4
  • 22
aishvarya
  • 721
  • 1
  • 5
  • 7

4 Answers4

126

budget is a group of limits to certain values that affect site performance

Open angular.json file and find budgets keyword and increase value

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "4mb", <===
      "maximumError": "5mb"
   },
   {
      "type": "anyComponentStyle",
      "maximumWarning": "150kb",
      "maximumError": "150kb"
   }
]
Drew
  • 358
  • 3
  • 9
mr. pc_coder
  • 16,412
  • 3
  • 32
  • 54
  • 6
    Do you know how to actually analyse the style bundles for a component. It seems like the only solution is just to raise the bar, rather than actually find out what is causing the bundle to grow so large to begin with. – ChazUK Jan 13 '22 at 17:05
  • That's really not the optimal way to handle it, one should try to make the bundle smaller to provide a better user experience. If you just allow the bundle to grow indefinetely, the app's loading time will grow indefinetely as well. – Allan Juan May 11 '23 at 15:31
46

Even though you can just bump up your limits, it's probably not what you want to do. The limits are there for a reason. You should try to avoid exceeding them in the first place if possible.

For me, the problem was I was importing my theme file (which was quite large) into my components' SCSS files.

@import "src/my-theme";

The only reason for that was that I needed to access my SCSS color variables within those files. It's a terrible idea to import any larger file in multiple of your styles only to access a few of your variables; your application will become huge and really slow to load.

If you only need access to your variables, I suggest this solution:

  1. in your theme file, make CSS variables like so: :root { --primary-color: #11dd11; }
  2. remove the import from your other SCSS files and use this to get your color instead: var(--primary-color)
kozenka
  • 589
  • 4
  • 6
  • 1
    interesting, I have exactly same problem, but isn't what the official docs recommend to do - https://material.angular.io/guide/theming-your-components#1-define-all-color-and-typography-styles-in-a-theme-file-for-the-component ? – Shrike Mar 13 '21 at 17:23
  • I did the same thing. I tried removing the sass imports and using the css variables like you suggested but got the same size. – Jwags Jun 03 '21 at 03:09
  • That's interesting. It did a huge difference in my case. My theme file was fairly large, so importing it in every single other scss file resulted in having all the files really big. If you're exceeding the budget by just a bit, don't be afraid to bump it up a bit, it's not a big deal. In some projects, I have to increase it too... – kozenka Jun 03 '21 at 08:24
  • 6
    I usually create a _variables.scss file separated from my theme.scss, and I import only the _variables.scss into the other scss files. – HasanAboShally Sep 05 '21 at 06:30
  • @HasanAboShally this is good to restrict the amount of SCSS rules (that is, size) imported. However each component importing the _variable.scss will have them replicated (not too bad if you use lazy loading, but still not ideal). kozenka's solution indeed avoids having to replicate .scss in multiple components. – Francesco Jan 21 '22 at 08:55
  • There's another solution: use the `@use` rule which is encouraged by the creators. "Any styles loaded this way will be included exactly once in the compiled CSS". https://sass-lang.com/documentation/at-rules/use – Loránd Péter Jan 14 '23 at 12:17
22

Open angular.json file and find budgets keyword and increase value of type anyComponentStyle:

{
  "type": "anyComponentStyle",
  "maximumWarning": "150kb",
  "maximumError": "150kb"
}
Qwertiy
  • 19,681
  • 15
  • 61
  • 128
Mohamed Elmancy
  • 256
  • 2
  • 4
0

kozenka's answer put me on the right track.

I was facing this and realized that my problem was all the Angular mixins that I was including in my theme file, which was used by other style files. My /src/theme.scss file looked something like:

@use `@angular/material` as mat;

@include mat.core(); // <-- this brings up the size a bit although not excessively

$theme: mat.define-dark-theme(...); // <-- the palettle (map of colors) that I use throughout the app
@include mat.all-legacy-components.themes($theme); // <-- this is very heavy

I need this last one since I'm using a lot of legacy components and migrating from legacy to MDC left me with a lot more work figuring out how to fit things in the new style given that many of the scss tags I was using before did no longer apply apparently (and I can't store the $theme variable into a CSS :root variable because it's a map and not a simple color code).

My solution was to create a different file, mixins.scss where I import the themes file and do all my includes (and any other necessary mixins). i.e:

/**
/src/theme.scss
*/

@use `@angular/material` as mat;

$theme: mat.define-dark-theme(...);

/**
/src/mixins.scss
*/

@use `@angular/material` as mat;
@use `/src/theme.scss` as *;

@include mat.core();
@include mat.all-legacy-components.themes($theme);

Just be sure to also include the new mixins file in /src/styles.scss, so those mixins styles are included in the overall style.

ribbit
  • 1,183
  • 11
  • 14