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

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

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)

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