Angular.jsonファイルを介してロードするbootstrapを取得できないようです
この問題と同様に、何もbootstrap relatedはロードされません。しかし、ng buildとng serveは問題を報告していないようです。それだけでページを参照しました。スタイリングされています。
Bootstrap 4.1.1 NavbarがAngular 6 で機能しない
[note] [email protected]へのロールバックは問題なく動作するようです
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"
]
以前にこの問題に直面し、解決策は@import '../node_modules/bootstrap/dist/css/bootstrap.css'を作成することです。コードの先頭にあるstyle.cssファイル内。 bootstrapは正常にロードされます
Angular 7プロジェクトに追加しました。手順は次のとおりです。
1-インストールbootstrap 4:
npm install bootstrap
2-以下のインポートをsrc\styles.cssに追加します
@import '~bootstrap/dist/css/bootstrap.min.css';
bootstrapが 'ng serve'を使用してアプリをレンダリングした後に更新/インストールされた場合は、プロセスを終了してアプリを再コンパイルします。
私はstyles.cssを編集することを提案します:
@import "~ bootstrap/dist/css/bootstrap.css";
より良い解決策が非常にシンプルで効果的であれば
Bootstrap.cssのインポートはプロセスの複製であるため、まったく不要です。 bootstrap-時々構成がbootstrap 3-そして、最新バージョンをnpm install bootstrap
私の問題を解決します。
@import '〜bootstrap/dist/css/bootstrap.css'は使用しないでください。
以下の@import 'bootstrap/dist/css/bootstrap.css'を使用して解決しました。 styles.css