WARNING in Exceeded maximum budget for SCSS FILE IN ANGULAR

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

Even though you can just bump up your limits, it's probably not what you really 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) in my components' SCSS files.

@import "src/my-theme";

The reason for that was only 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)

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

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