0

I'm using Bootstrap in an Angular project. I was using the Bootstrap mt-4 class in a number of elements on a page, each of them wrapping a form control and its label and validation messages. I decided to encapsulate that by replacing mt-4 with form-item throughout, and setting up styling for those items in the SCSS file:

@use '/node_modules/bootstrap/scss/bootstrap-grid.scss'; .form-item { @extend .mt-4 }

This built and ran fine on my local machine. But when I built it on the build server, I got the following message:

Error: /app/src/app/views/xyz/xyz/xyz-edit.component.scss exceeded maximum budget. Budget 4.00 kB was not met by 47.68 kB with a total of 51.68 kB.

Is it that my budget (which I feel is settable) is unnecessarily low, or is it that the entirety of Bootstrap's SCSS is too large to import into a single SCSS file for such a purpose? Or am I supposed to be importing from the minified Bootstrap CSS file--does that even work? Or should I identify the smaller SCSS where mt-N is actually defined and import only that?

I see other questions have been asked here about similar situations, but they seem to be attempting something different from what I'm doing (generally, implementing a theme). I'm just trying to encapsulate a repeated reference to a measurement-bound class name in a class with a name meaningful in respect to its use.

Improve this question

1 Answer 1

Reset to default
2

increasing the limit in angular.json will stop the warning but for production builds always include the minified version of the CSS file which will reduce significant the size.

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks. For some reason I hadn't thought that \@extend would work on a plain CSS file--it was a bit murky to me. I switched the \@use statement to bring in the minified CSS file and it does work. Now I'm just waiting for my pull request to be approved so I can confirm that this fixes the budget problem.
Shockingly, I'm still showing the same budget exceedance on my SCSS file! Well, not shocking. The min file is 52K, and the budget is 4K. Obviously I have to up the budget.
yeah, I just downloaded the minified version of the bootstrap grid file and it's around 34kb, so there is not much you can do about it, just increase the limit and you will be fine
I'm wondering--since I'm already importing bootstrap-grid into styles.scss, if I @use that, will that avoid going up against the budget? I could just try it instead of asking, but I don't want to drive my colleagues crazy with multiple pull requests.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.