將引導程序添加到 Angular 8

Question

我正在嘗試將 Bootstrap 添加到我的 Angular 應用程序中。 我對此並不陌生，盡管遵循了所需的步驟，但我在安裝引導程序時遇到了問題。

我完成了安裝 Angular cli、ng new first-app 和 ng serve 的所有必要步驟。
我打開了 vs 代碼終端並嘗試使用安裝引導程序
npm 安裝引導程序--保存
然后在 style.css 中添加這個
@import "~bootstrap/dist/css/bootstrap.css"

但是，當我單擊懸停在上述代碼上的鏈接時，它仍然顯示無法找到文件並提示使用此路徑創建文件。

Answer 1

如果您只想從引導程序添加 styles，則 angular.json 文件中有一個屬性允許您將其包含在構建中。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "yourproject": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ]
          },
        ...

請參閱： https://angular.io/guide/workspace-config#styles-and-scripts-configuration

Answer 2

在項目內src文件夾下的style.css文件中添加以下行。

@import '~bootstrap/dist/css/bootstrap.min.css';

Answer 3

歡迎來到 StackOverflow！

Bootstrap 不是 TypeScript 代碼，所以你不要這樣導入它。 相反，它是 CSS 代碼，因此您希望將其導入index.html文件作為`

這是我在我的應用程序中導入 boostrap 的方法——下面進入index.html的<head>標記

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

這樣做之后，我就可以在我的任何代碼模板中使用 Bootstrap。

順便說一句，該代碼將鏈接到 4.3.1 版本——如果你想鏈接到不同的版本，你可以 go 到https://getbootstrap.com/並獲得一個“新鮮”鏈接——該網站非常有幫助讓您使用 CDN 鏈接。

但我看到你想將它導入到你的 styles.css 文件中，所以你可能必須使用相對路徑，可能類似於：

@import "../node_modules/bootstrap/dist/css/bootstrap.css";

Answer 4

添加引導程序的一種簡單方法是使用 Angular CLI(npm install)。

從命令行界面安裝引導程序並在 angular.json 中引用它

npm install bootstrap --save

Answer 5

如果要添加 bootstrap@3.x || 這是程序。

步驟 1. 安裝引導程序。 在終端中運行此命令。

npm install bootstrap@3.3.7

步驟 2. 安裝 Jquery。 運行此命令

npm install jquery

步驟 3. 然后，go 到angular.json文件

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

第 4 步。不要忘記重新啟動您的應用程序。

將引導程序添加到 Angular 8

問題描述

5 個解決方案

解決方案1
3 已采納 2020-05-04 20:42:30

解決方案2
1 2021-01-02 12:16:29

解決方案3
0 2020-05-04 19:32:45

解決方案4
0 2020-05-16 12:42:05

解決方案5
0 2022-07-29 16:09:13

將引導程序添加到 Angular 8

問題描述

5 個解決方案

解決方案1 3 已采納 2020-05-04 20:42:30

解決方案2 1 2021-01-02 12:16:29

解決方案3 0 2020-05-04 19:32:45

解決方案4 0 2020-05-16 12:42:05

解決方案5 0 2022-07-29 16:09:13

解決方案1
3 已采納 2020-05-04 20:42:30

解決方案2
1 2021-01-02 12:16:29

解決方案3
0 2020-05-04 19:32:45

解決方案4
0 2020-05-16 12:42:05

解決方案5
0 2022-07-29 16:09:13