_custom.scss를 만들어 부트 스트랩 4에서 변수를 오버라이드하는 방법 alpha 6

Question

부트 스트랩 4 알파 6 테마를 사용자 정의하려고합니다. _variable.scss 파일에서 _custom.scss로 설정을 복사하여 덮어 쓰려고합니다. 하지만 _custom.scss 파일을 소스 코드에서 찾지 못했습니다. 이 _custom.scss 파일을 프로젝트에 어떻게 추가합니까?

Answer 1

I 문제를 언급 함 here, here 및 here :

☐ 간편하고 내장 된 변수 재정의를 위해 _custom.scss을 구현하는 것이 좋습니다. 당신의 부트 스트랩 4는 _custom.scss 파일을 제공하지 않았기 때문에

그래서, 당신은 단지 bootstrap/scss/_custom.scss를 다시 작성해야합니다.

그 다음은해야하는데 무엇을 bootstrap/scss/bootstrap.scss 편집 :

// Core variables and mixins 
@import "variables"; 
@import "mixins"; 
@import "custom"; 

그런 다음 /scss/_variables.scss의 기본 변수를 쉽게 최우선위한 _custom.scss 파일 Customising variables

부트 스트랩 4 [가정] 배를 따르십시오. 거기에서 관련 라인을 복사하여 _custom.scss 파일에 붙여넣고 값을 수정 한 다음 Sass를 다시 컴파일하여 기본값을 변경하십시오. 재정의 값에서 !default 플래그를 제거하십시오.

Answer 2

소스 버전의 부트 스트랩 4 알파 6을 사용하고 있습니까? 또는 실수로 _custom.scss을 삭제하지 않았습니까?

git repo for Boostrap 4 alpha 6을 보면 _custom.scss이 포함되어 있습니다. 에 _custom.scss 파일을 만듭니다

Answer 3

나는 나의 현재의 솔루션을하지 특히 ​​기쁘게 생각하지만, 단순히 부트 스트랩 4.

1. 내 현재의 각도 구현하는 방법으로에 "재정의"변수를 작동하여 프로젝트
2. 프로젝트
   • 새 파일로 복사 부트 스트랩에서 bootstrap.scss의 내용 (예를 들어, node_modules \ 부트 스트랩 \하는 SCS \ bootstrap.scss)
   • 업데이트 각 난에 새로운 bootstrap.scss 만들기 당신은 부트 스트랩이 새로 만든 bootstrap.scss 파일을 참조 가져올 때마다 업데이트
3. 변수와 유지 mixin 사이에 새 사용자 지정 파일 가져 오기 추가 새로운 bootstrap.scss 파일
4. 에 대한 올바른 파일 위치 상대적으로 MPORT

샘플 구현 :
폴더 구조 :

app 
└── styles 
    ├── bootstrap.scss 
    └── _custom.scss 

_custom.scss :

// For example, change links to be yellow 
$link-color: yellow; 

bootstrap.scss가 포함

@import "~bootstrap/scss/variables"; 
@import "custom"; 
@import "~bootstrap/scss/mixins"; 
//etc. 

app.component.scss (외부 부트 스트랩의 추가 스타일에 내 위치) :

@import "./styles/bootstrap"; // instead of @import "~bootstrap/scss/bootstrap";