Question

我似乎无法通过angular.json文件加载引导程序

类似于此问题，但是，不会加载任何与引导程序相关的内容。但是，构建和服务似乎没有报告任何问题。只是然后我浏览到页面，很明显，没有样式。
Bootstrap 4.1.1 Navbar not working with Angular 6

[注释] 回滚到Bootstrap@3.3.7似乎很好

package.json

{
  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "bootstrap": "^4.1.1",
    "core-js": "^2.5.4",
    "jquery": "^3.3.1",
    "popper": "^1.0.1",
    "popper.js": "^1.14.3",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }

angular.json “

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

Answer 1

我之前遇到过这个问题，解决方法是 @import'../node_modules/bootstrap/dist/css/bootstrap.css'; 在任何代码顶部的style.css文件中。因此引导程序将成功加载

Answer 2

我建议编辑styles.css：

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

如果更好的解决方案非常简单和有效

Answer 3

如果使用“ ng serve”渲染应用后引导程序已更新/安装，请终止进程并重新编译应用。

Answer 4

我刚刚将其添加到Angular 7项目中，步骤为：

1-安装引导程序4：

npm install bootstrap

2-将以下导入内容添加到src \ styles.css

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

Answer 5

请勿使用 @import'〜bootstrap / dist / css / bootstrap.css'。

我下面有解决方法 @import'bootstrap / dist / css / bootstrap.css'; 在styles.css中

Answer 6

完全不需要导入bootstrap.css，因为它是进程的重复。我已经通过删除引导程序解决了它-有时配置可能适用于引导程序3-然后使用npm install bootstrap安装最新版本可以解决我的问题。

Answer 7

写@import'../node_modules/bootstrap/dist/css/bootstrap.css';在style.css中这会给你编译错误之后，编写如下旧代码以使其正常工作

带有Bootstrap 4.1的Angular 6无法加载

7 个答案: