Question

我在scss文件中包含以下几行：

  @include transition(all 0.5s ease);

  @include media-breakpoint-only(md) {
    width: 500px;
  }

  @include media-breakpoint-only(xs) {
    width: 280px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 4px;
  }

这些要求：

@import '~bootstrap/scss/bootstrap';
@import '~primeng/resources/primeng.min.css';

这会将未压缩的有效负载从几个kb提升到324.57kb。

太多了：)有人可以帮我得到我需要的零件吗？

Answer 1

第一行将导入所有引导程序库。

Bootstrap未列为PrimeNG的依赖项。

media-breakpoint-only来自Bootstrap。

您可以通过更改以下行来减少这一点：

@import '~bootstrap/scss/bootstrap';

类似（未经测试）：

@import '~bootstrap/scss/_functions'
@import '~bootstrap/scss/_variables'
@import '~bootstrap/scss/mixins/_breakpoints'

这假定您没有在代码中使用任何其他Bootstrap内容。

如果只希望Media Query支持，请使用更小巧的sass-mq

减少bootstrap / primeng scss导入足迹

1 个答案: