在带有 SCSS 的 Angular 14 中使用 Bootstrap 5答案

【问题标题】：Using Bootstrap 5 in Angular 14 with SCSS在带有 SCSS 的 Angular 14 中使用 Bootstrap 5
【发布时间】：2022-12-17 11:49:45
【问题描述】：

我正在尝试在使用 SCSS 而不是 CSS 的 Angular 14 项目中设置 Bootstrap 5。我已经通过 npm (npm install bootstrap --save) 安装了引导程序，现在我的 package.json 文件中正确引用了它：

"dependencies": {
    "@angular/animations": "^14.2.2",
    "@angular/cdk": "^14.2.2",
    "@angular/common": "^14.2.2",
    "@angular/compiler": "^14.2.2",
    "@angular/core": "^14.2.2",
    "@angular/forms": "^14.2.2",
    "@angular/material": "^14.2.2",
    "@angular/platform-browser": "^14.2.2",
    "@angular/platform-browser-dynamic": "^14.2.2",
    "@angular/router": "^14.2.2",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.1",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },

我在我的 angular.json 文件中添加了 bootstrap.scss 文件引用：

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/file-sharing-app.ui",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "src/custom-theme.scss",
              "node_modules/bootstrap/scss/bootstrap.scss"
            ],
            "scripts": []
          },

但是下面的类没有效果：

<span class="ml-3">File Sharing App</span>

我使用过的其他引导程序类都没有工作。我尝试重新启动应用程序（重新运行ng serve）。有人知道我错过了什么吗？

【问题讨论】：

标签： angular sass bootstrap-5

【解决方案1】：

如果您使用的是 SCSS，请不要将其添加到您的 angular.json 配置中。相反，将其直接添加到您的scr/styles.scss：

@import "~bootstrap/scss/bootstrap";

【讨论】：

所以我从 angular.json 文件中删除了引导程序行并将上面的行添加到我的 style.scss 文件的顶部但这没有任何区别（即引导程序类仍然没有按照操作中的描述工作）
@Pablo52，你能描述一下哪些引导程序类不起作用吗？因为我不相信 ml-3 是 Bootstrap 5 中的有效类名。
但是 styles.scss 直接在哪里？
@SirajAli 在scr/styles.scss

【解决方案2】：

您是否尝试过重新运行您的应用程序？

如果您已经尝试过，那么您可以尝试安装 jquery

npm install jquery --save

并添加

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

【讨论】：

Bootstrap 5 不需要 jQuery