Angular 8 - 如何在資產靜態文件中導入引導程序 4？

Question

我正在使用用於靜態文件的 import bootstrap 4 庫的語法

<link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">

angular.json

{
...
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angularapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/browser-not-supported.html"
            ],
            "styles": [
              "src/styles.less"
            ]
            ...
          }
}
...

瀏覽器不支持.html

<link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">

結果：

有人有同樣的問題嗎？

謝謝！

Answer 1

在 angular.json 文件中將引導程序參考鏈接添加到您的樣式屬性

例子：

        "styles": [
          "src/styles.less",
          "../node_modules/bootstrap/dist/css/bootstrap.min.css"
        ]

Answer 2

將您的 css 文件放在您的 assets/css 文件夾中，然后像這樣更改

<link rel="stylesheet" type="text/css" href="./assets/css/bootstrap.min.css">

或者包含在你的 angular.json 文件中

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ]

Answer 3

1）安裝引導程序

npm i bootstrap

2）編輯angular.json或.angular-cli.json中的“style”數組

"styles": [
          "src/styles.less",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ]

3）再次將其導入styles.less

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

Answer 4

嘗試使用 npm 安裝它：

npm install ngx-bootstrap bootstrap --save

欲了解更多詳情，請訪問：

如何將引導程序添加到 angular-cli 項目