Primeng 17 和 Bootstrap 5

Question

可以在 Angular 17 项目中使用

primeng ^17.6.0

和

bootstrap ^5.3.2

吗？我想对我的应用程序的公共部分使用 bootstrap，但有一个管理部分我想使用 primeng。根据文档：https://primeng.org/guides/csslayer#bootstrap我必须使用图层，它提到我应该使用

bootstrap-reboot.css

。有人可以指导我应该如何使用它吗？ 他有意为之：

角度.json

 "styles": [
   "src/styles.scss"
 ],
 "scripts": [
   "node_modules/bootstrap/dist/js/bootstrap.bundle.js"
 ],

package.json

"bootstrap": "^5.3.2",
"primeng": "^17.6.0",

组件.html

<button class="btn btn-primary">Bootstrap</button>
<p-button label="Primeng"></p-button>

如果我这样设置样式：

样式.scss

@layer bootstrap, primeng;
@import "bootstrap/scss/bootstrap.scss" layer(bootstrap);
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.min.css";

我得到以下结果：

如果我将顺序更改为：

@layer bootstrap, primeng;
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.min.css";
@import "bootstrap/scss/bootstrap.scss" layer(bootstrap);

我得到：

如果我改为：

@layer reboot, primeng;
@import "bootstrap/scss/bootstrap-reboot.scss" layer(reboot);
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.min.css";

我得到：

那么有什么办法可以让两者共存吗？

Answer 1

那么两者有什么办法可以共存吗？

恐怕没有完美的解决方案。 @layer 是一种级联机制，这意味着如果规则针对同一元素，它会影响规则相互覆盖的方式。

@layer bootstrap, primeng;

基本上意味着，声明或导入到 primeng 层的每个规则都会覆盖声明或导入到 bootstrap 层的规则。

如果您使用的是 sass （我假设您在示例中使用的是

@import "bootstrap/scss/bootstrap-reboot.scss"

），解决方法可能是将 bootstrap 导入到您的管理页面中，例如：

// global scss file without style encapsulation
app-admin-page {
  @import "bootstrap/scss/bootstrap-reboot.scss";
}

我不确定它会带来你想要的确切结果，但我认为值得尝试一下。

Answer 2

我遇到了这个问题，但找不到明确的解决方案。然而，我没有导入整个

bootstrap.min.css

，而是通过仅导入我需要的

bootstrap-grid.scss

来解决这个问题。这是 styles.scss 的最终版本：

$gutter: 1rem; //for primeflex grid system
@import 'bootstrap/scss/bootstrap-grid.scss';
@import 'libs/sakai/src/assets/layout/styles/layout/layout.scss';

@import 'primeng/resources/primeng.min.css';
@import 'primeflex/primeflex.scss';
@import 'primeicons/primeicons.css';