angular-cli 및 bootstrap 4

Question

각도 2로 첫 단계를 이동합니다. 특히 각도 -cli 공식 도구를 사용하여 새 프로젝트를 만듭니다.

나는이 프로젝트가 제대로 생성이 방법

ng new [my-project-name] 

에서 새 프로젝트를 만들었습니다.

그 후 bootstrap 4를 설치하고 angle-cli 페이지의 공식 가이드를 따릅니다.

나는 NPM과 부트 스트랩 설치 :

npm install bootstrap@next 

그리고 내 각-cli.json에 행을 추가

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

응용 프로그램 객체.

내가 응용 프로그램을 구축하고 함께 서버에서 실행하는 경우 : ng serve

내가 부트 스트랩 CSS와 자바 스크립트에 대한 참조 index.html을에서 찾을 수 없습니다.

이 파일의 가져 오기가 내 index.html에 자동으로 추가되거나 수동으로 추가해야하는지 이해할 수 없습니다.

Answer 1

이 파일의 가져 오기가 내 index.html에 자동으로 추가되거나 수동으로 추가해야하는 경우 나는 알지 못합니다.

직접 추가해야합니다.

Answer 2

angular.cli.json 파일에 스크립트 및 스타일 항목을 추가하면 해당 항목이 전역 범위에 추가됩니다. 특히, scripts.bundle.js 및 styles.bundle.js에 추가됩니다. index.html에 추가 할 필요가 없습니다. 봉사를 중단하고 다시 시작한 후에는 잘 가야합니다. 좋은 측정을 위해 angular.cli.json을 변경 한 후 npm 재 작성을 실행합니다.

Answer 3

은 HTML 파일에 수동으로 아무 것도 추가 할 필요가 없습니다. 자동으로 수행됩니다.

귀하의 CSS 스타일이 styles.bundle.css 파일에 추가됩니다

는 그 이유는. 따라서 앱을 실행할 때 HTML 소스에서 스타일 시트에 대한 링크 (<link href="styles.bundle.css" rel="stylesheet">)가 표시됩니다. 브라우저에서 styles.bundle.css을 클릭하면 함께 컴파일 된 모든 스타일이 표시됩니다.

하나 더 중요 것이 있습니다. 또한 다음에 각-cli.json 파일의 스타일 시트의 순서를 바꿔 제안 :

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

위의 변화에 ​​대한 이유는 당신의 파일을 컴파일하고 당신이 제공하는 순서로 제공된다는 점이다 angular-cli.json 파일. 따라서 btn-primary에 대한 custom 스타일을 styles.css에 작성했다면 bootstrap.css가 항상 덮어 쓰게되고 UI에 스타일이 적용되는 것을 보지 못하게됩니다. 무엇이 잘못되었는지 알아 내라.

파일 순서를 바꾸면 부트 스트랩 스타일이 먼저로드되고 사용자 정의 스타일이로드되어 부트 스트랩의 스타일을 자신의 스타일로 오버 라이딩합니다. 이것은 현재 귀하의 경우에해야 할 유일한 수정 사항이며 다른 모든 사항은 귀하의 노력없이 원활하게 작동해야합니다.