Angular, Bootstrap 4, angular-cli - 종속성 scss를 배치하고 가져올 위치는 어디입니까?

Question

this question을 참조하십시오.이 스크립트는 부트 스트랩의 변수에 의존하지 않는 scss가있는 경우 작동합니다.

<link rel="stylesheet" href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" 

그때/자산 폴더로 styles.scss를 넣어 경우,이 같은 내용이 있습니다 :

@include media-breakpoint-up(sm) { 
    html { 
    font-size: 16px; 
    } 
} 

프로젝트 빌드 실패

을 내 index.html을에서

Module build failed: 
@include media-breakpoint-up(sm) { 
     ^
     No mixin named media-breakpoint-up 

내 질문은 어디에 부트 스트랩 변수 및 mixins에 따라 내 자신의 CSS를로드 할 수 있습니까?

Answer 1

당신은 angular-cli.json에 styles.scss 파일을 설정할 수 있습니다

{ 
    "apps": [ 
    { 
     "styles": [ 
     "assets/styles.scss" 
     ], 
    } 
    ] 
} 

이 자동으로 출력 마크 업의 머리 부분에 주입합니다.

는 부트 스트랩 4 유지 mixin을 사용하려면 프로젝트 종속성으로 부트 스트랩을 추가해야합니다 :

npm install --save bootstrap@4.0.0-alpha.5 

그런 다음 당신이 직접 SCSS 파일의 (이하 "~"node_modules를 나타내는 루트를 사용)이나 mixin을 가져올 수 있습니다.

@import '~bootstrap/scss/mixins'; 

:

은 그래서 당신의 SCSS 당신처럼 부트 스트랩 참조