Styled-component를 사용한 React프로젝트를 build할때 스타일이 적용 안될때

React 프로젝트 개발할때 styled-component를 사용하는 사람이 많을것 이라고 생각합니다

css를 component형식으로 자바스크립트안에 담을 수 있다는 점이 정말 매력있는 부분이죠

 

저도 사용하고 있는데, 제가 맞닥뜨린 현상은 다음과 같습니다

 

1. styled-component를 사용한 react프로젝트를 npm run build를 사용해 build를 함

2. build할때 나온 index.html을 서버에 페이지형식으로 출력하게 함. (sendFile 메소드)

3. 스타일이 전부 깨져서 나옴?????

원래 페이지

build하고난 페이지

 

 

반응형

 

해결책

styled-component 자체 버그인것 같다.

@import 구문을 사용하는순간 build할때 깨지는 현상이 발견됐다. 

@import를 빼면 바로 해결 가능....

 

이거때문에 한달동안 삽질했는데, 너무 허무하다 하..

이런 버그는 공유하는게 중요하다고 배웠습니다.

 

const Contentstyle = styled.div`
  //@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  //font-family: 'Roboto', sans-serif;
`;