仅将Bootstrap添加到角度中的特定组件(版本13) [英] Adding Bootstrap only to Specific Components in Angular (version 13)

问题描述

我的问题是我有一个角度为13(当前最新)的项目，并且我只需要将Bootstrap框架添加到此项目中的一组特定组件。

我是否可以按组件链接它？

预期问题

为什么不将Bootstrap添加到整个项目？

这个项目是一个现有的没有框架或库的网站的迁移，只使用中小型的普通HTML-css-JS。迁移的时间非常有限(实际上时间如此之短，以至于我的Component.ts文件中只有普通的JavaScript)。我也不熟悉角度，实际上是第一次用任何前端Web框架启动如此规模的项目。

选择的答案 最初，我确实选择按组件添加引导并从我的资产文件夹中引用它。然而，在另一位用户关于视图封装导致糟糕的性能后果的输入之后，我确实设法更新了给定的CSS代码，使其与Bootstrap 5框架的全球集成兼容。我建议其他人在可能的情况下也修复兼容性，因为性能问题。如果有人好奇ng add bootstrap，我用的是来自NPM的包。我可以确认Bootstrap的CDN也可以工作。

推荐答案

将Bootstrap css文件保存在assets文件夹中，并将路径添加到组件styleUrls中。

我的文件夹结构是-

my-app/
├─ node_modules/
├─ src/
│  ├─ app
│  ├─ assets

在组件中包含CSS路径-

@Component({
selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: [
     './test.component.css',
     '../../assets/bootstrap.min.css'
  ],
})

这篇关于仅将Bootstrap添加到角度中的特定组件(版本13)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！