npm 프로젝트로 bootstrap 이용중에 질문있습니다.
본문
bootstrap의 여러 예제를 체크하고 색상도 바꾸려고 여러 색상 값들을 바꿔봤는데요
어떤 요소는 색상이 잘 적용이 되는데
어떤 요소에는 색상이 적용이 안 되고 기본 색상값으로 출력이 됩니다.
제가 확인 해본 것은 btn 요소는 색상이 알맞게 변하는데 그 외 요소는 변하지 않습니다.
영상 자료 보면서 하나씩 비교해가며 다른 부분이 있나 봤는데 그런 요소는 없었습니다.
Dropdown button, btn-success는 새로 넣어준 lime 색이 잘 출력이 되는데
spinner 컴포넌트의 text-secondary는 색상이 변하지 않습니다.
url이 없어서 코드랑 출력물 사진 첨부하겠습니다..
답변 3
제가 기억이 가물가물 한데
테마 컬러에 지정하는 것이
테이블, 버튼, 등등에 적용 되는 곳이 있고
적용되지 않는 곳이 있습니다.
쉽게 말씀 드리면
테마에 한다고 해서 모든 부트스트랩 요소들에 컬러가 적용 되지 않습니다.
-------------------- 위 경우가 있고
$primary: #4d0585 !default;
$secondary: #4d0585 !default;
$success: #4d0585 !default;
$info: #4d0585 !default;
$warning: #4d0585 !default;
$danger: #red !default;
$light: #4d0585 !default;
$dark: #4d0585 !default;
$theme-colors: ( 내용 )
@import "../bootstrap-5.1.3/scss/functions";
@import "../bootstrap-5.1.3/scss/variables";
이렇게 $theme-colors 를 위 두줄 임포트 보다 위에 두고 해보세요
그럼 에러가 생길 거니까 그 위에 컬러까지 지정해주시고요
친절하게 알려주셔서 감사합니다!
그럼
$primary: #4d0585 !default;
$secondary: #4d0585 !default;
$success: #4d0585 !default;
$info: #4d0585 !default;
$warning: #4d0585 !default;
$danger: #red !default;
$light: #4d0585 !default;
$dark: #4d0585 !default;
이렇게 먼저 지정 한 뒤에 $theme-colors 내용을 추가해서 해보라는 말씀이시죠?
임의로 primary~dark의 색상을 지정해주고
#theme-colors: {} 를 추가해주니 정상적으로 동작하네요 정말 감사합니다.
잘 안돼서 style=“color: color”> 추가해서 그냥 쓰려고 했는데 감사합니다 ㅎㅎ
혹시 캐시가 남아서 그런건아닐까요..?컨트롤+f5번해보시고 안돼면 ..강제적으로 css에서 수정하는 방법도 있습니다.
답변 하면서 얼핏 기억이 떠올랐는데
$theme-colors 안에 primary 의 컬러 값을 설정한다고 해서
실제 $primary: 변수의 컬러값까지 변하지 않아서 그문제가 생기는 것 같아요
비슷한 문제로 여러번 수정했던 기억이 있습니다.