BootStrap 설치 시 scss 개입

[김남현]

안녕하세요 코딩애플님,

덕분에 리액트를 정말 쉽게 배우고 있습니다.

 

다름 아니라, bootstrap을 처음부터 설치 후 진행하지 않고, 중간부터 bootstrap을 설치하여 사용했는데요

import "bootstrap/dist/css/bootstrap.min.css";만 했을 뿐인데, 전역에 거쳐 모든 텍스트들의 간격, font-weight가 scss로인해 조정되네요

bootstrap이 헤더에 margin-bottom을 2rem임의로 줍니다.

 

[정상]

 

[변경]

bootstrap import시 임의로 변경되는 모습 (찾아보니 scss의 이 부분이 모든 텍스트들의 마진이나 폰트 사이즈, 굵기를 조정합니다.) 

이걸 방지할 방법이 있을까요?

감사합니다

이번 새로 업데이트된 React18과 Redux도 정말 잘 보고 있습니다
감사합니다!

[codingapple]

import "bootstrap/dist/css/bootstrap.min.css"

하지말고 코드짜봅시다

[김남현]

답변 감사합니다 선생님!

import "bootstrap/dist/css/bootstrap.min.css" 안 넣고 Bootstrap component 사용해봤습니다.

역시 스타일 적용 안되어 그냥 평범한 민무늬로 나옵니다.

 

1. import "bootstrap/dist/css/bootstrap.min.css" 안하면 Bootstrap 정상적으로 이용 불가

2. import "bootstrap/dist/css/bootstrap.min.css" 하면, 기존 적용된 CSS 코드와 충돌 -> 글씨 크기와 마진, 패딩 모든 것에 개입합니다.

 

또 시도해 볼만한 솔루션이 있을까요!?

[codingapple]

getbootstrap.com 가서 소스코드 다운받아서 필요없는 부분을 직접 지운 다음에 

그 css 파일을 index.html에 첨부하는식으로 해야할듯요 

[김남현]

넵! 솔루션 감사합니다!

[찰리]

안녕하세요! 제가 똑같은 문제를 겪어 이것저것 시도해봤는데
node_modules 에서 bootstrap/dist/css 폴더에 가보니 min.css 파일 말고 그냥 css 파일도 있더라구요
이걸 import 해주었더니 개입문제가 해결되고, 부트스트랩 디자인도 적용되었습니다.
혹시 찾아보실 분들을 위해서 늦게나마 댓글 달아요!

(react-bootstrap을 사용할 js 파일 또는 App.js에 )
import 'bootstrap/dist/css/bootstrap.css'

[글쓴이]

글