npm 프로젝트로 bootstrap 이용중에 질문있습니다.
bootstrap의 여러 예제를 체크하고 색상도 바꾸려고 여러 색상 값들을 바꿔봤는데요
어떤 요소는 색상이 잘 적용이 되는데
어떤 요소에는 색상이 적용이 안 되고 기본 색상값으로 출력이 됩니다.
제가 확인 해본 것은 btn 요소는 색상이 알맞게 변하는데 그 외 요소는 변하지 않습니다.
영상 자료 보면서 하나씩 비교해가며 다른 부분이 있나 봤는데 그런 요소는 없었습니다.
Dropdown button, btn-success는 새로 넣어준 lime 색이 잘 출력이 되는데
spinner 컴포넌트의 text-secondary는 색상이 변하지 않습니다.
url이 없어서 코드랑 출력물 사진 첨부하겠습니다..
답변 3개 / 댓글 2개
제가 기억이 가물가물 한데
테마 컬러에 지정하는 것이
테이블, 버튼, 등등에 적용 되는 곳이 있고
적용되지 않는 곳이 있습니다.
쉽게 말씀 드리면
테마에 한다고 해서 모든 부트스트랩 요소들에 컬러가 적용 되지 않습니다.
-------------------- 위 경우가 있고
$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 내용을 추가해서 해보라는 말씀이시죠?