부트 스트랩 4의 변수를 다른 변수로 대체하려면 어떻게합니까?

Question

SASS와 함께 부트 스트랩 4를 사용하고 있는데 부트 스트랩의 _variables.scss에 정의 된 변수를이 파일에 정의 된 다른 변수로 재정의하는 방법을 스스로 묻습니다.

부트 스트랩 웹 사이트에서 필자는 우선적으로 내 재정의를 가져온 다음 부트 스트랩 SASS 파일을 가져 오는 방법을 배웠습니다. 지금은 부트 스트랩의 변수 파일에 정의 된 밝은 회색 변수 $gray-200와 신체의 배경 색상을 대체하려면 내 _overrides.scss에서

@import 'modules/_overrides.scss'; 
@import 'vendor/_bootstrap.scss'; 

: 그래서 이런 짓을. 그러나 변수를 정의하기 전에 변수에 액세스하려고하면 오류가 발생합니다.

많은 연구 끝에 Bootstrap의 _variables.sccs에서 재정의하려는 변수를 복사하고 재정의 파일의 맨 위에 배치하여이 문제를 해결할 수 있음을 깨달았습니다. 변수가 여러 곳에서 정의 되었기 때문에 이것은 매우 더러운 방법처럼 보입니다.

제 질문은 : 다른 부트 스트랩 변수로 부트 스트랩 변수를 재정의 할 수있는 방법이 있습니까?

Answer 1

최근 프로젝트에서 이와 같은 딜레마에 직면했습니다. 이 방법이 조금 덜러운 것으로 판명 된 한 가지 방법은 내 재정의 변수와 부트 스트랩의 변수를 모두 포함시킨 후에 변수 값을주는 것입니다.

@import 'modules/_overrides.scss'; 
@import 'vendor/_bootstrap.scss'; 

$body-bg: $gray-light; 

당신은 이전 시점에서 부트 스트랩의 독립적 인 자신의 변수를 정의하고 부트 스트랩 변수에게 새로운 가치를 제공하기 위해 그 변수를 사용하여 좀 더이 정리 할 수있다.

$myOwnGrayColor: #555; 
@import 'modules/_overrides.scss'; 
//In _overrides.scss make something like $body-bg: $myOwnGrayColor; and $gray-light: $myOwnGrayColor; 
@import 'vendor/_bootstrap.scss'; 

정의 될 때까지 변수를 참조 할 수 없기 때문에 이것이 유일한 방법입니다.