在角度项目原因中延长了一点点的引导程序“预算”超过CI/CD时间

发布于 2025-02-13 18:53:20 字数 757 浏览 0 评论 0原文

我正在一个角度项目中使用bootstrap。我在页面上的许多元素中使用了Bootstrap MT-4类,每个元素都包装了表单控件及其标签和验证消息。我决定通过mt-4 form-item income 整个过程中封装,并为SCSS文件中的这些项目设置样式:

@use '/node_modules/bootstrap/scss/bootstrap-grid.scss';

.form-item {
  @extend .mt-4
}

构建并在我的本地上运行正常机器。但是,当我在构建服务器上构建它时,我会收到以下消息:

error:/app/src/app/views/xyz/xyz/xyz/xyz-edit.component.scss.scss超过最大预算。预算4.00 kb没有满足47.68 kb的满足,总计51.68 kb。

是我的预算(我觉得这是可解决的)是不必要的,或者是Bootstrap的SCSS太大而无法进口的。为了这样一个目的,进入单个SCSS文件?还是我应该从缩小的Bootstrap CSS文件中导入 - 甚至有效的方法?还是我应该确定较小的SCSS,其中mt-n实际上仅定义并导入该mt-n

我看到其他问题在这里询问了有关类似情况的问题,但是它们似乎正在尝试与我所做的事情不同的事情(通常是实施主题)。我只是试图将重复的引用封装在班级中的测量界类名称中,其名称在其使用方面有意义。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

违心° 2025-02-20 18:53:20

增加 angular.json 的极限将停止警告,但对于生产构建,始终包括CSS文件的缩小版本,这将减少大小的大小。

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文