React-bootstrap .css안먹을때

react-bootstrap에서 import한 .css파일이 빌드 시 안먹는 문제가 발생했다.

빌드될 때 동적인 코드가 정적으로 바뀌면서 바뀌면서 우선순위 등 뭔가 꼬인 것 같다.

 

react-bootstrap에서 css를 custom할 때에는 공식 사이트처럼

<style>태그를 써야한다

 

react-bootstrap 공식 사이트 예제

<>
  <style type="text/css">
    {`
    .btn-flat {
      background-color: purple;
      color: white;
    }

    .btn-xxl {
      padding: 1rem 1.5rem;
      font-size: 1.5rem;
    }
    `}
  </style>

  <Button variant="flat" size="xxl">
    flat button
  </Button>
</>