WARNING in Exceeded maximum budget for SCSS FILE IN ANGULAR

Question

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

Answer 1

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"
   }
]

Answer 2

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)