Angular 와  Bootstrp 연동하기

Angular 와 Bootstrp 연동하기 updated_at: 2024-01-26 18:24

부트스트랩 연동하기

angular에서 bootstrp과 연동하는 방식을 간략하게 설명드리겠습니다.

bootstrp package install

npm i bootstrap

인스톨을 마치면 node_modules/bootstrap 폴더에 관련 파일들이 다운로드 됩니다.

angular.json 편집

파일을 열고 아래처럼 projects 와 test에 각각 넣어 주시면 됩니다.

"projects": {
  ..........
  "styles": [
    "@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.scss",
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
  ],
},
 ..........
"test": {
   ..........
  "styles": [
    "@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.scss",
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
  ],
}
  • 파일수정후 angular를 다시 기동해 주셔야 정상적으로 적용됩니다.
ng serve
평점을 남겨주세요
평점 : 5.0
총 투표수 : 3

질문 및 답글