styled-components v5 createGlobalStyle 이슈

styled-components v5 createGlobalStyle 이슈

styled components

로컬 환경에서는 스타일이 정상적으로 보이는데, production 환경에서 스타일이 정상적으로 보이지 않아서 이를 확인하던 중, styled-components 5 버전에서 cGS(createGlobalStyle)에 이슈가 있음을 확인했습니다.

해결 방법

createGlobalStyle 내에 @import 가 존재하면 스타일이 깨지는 것이며, styled-components 문서에서 역시 이에 대한 해결 방법으로 createGlobalStyle 내에 @import를 사용하지 않는 것을 제시하고 있습니다.

import modernNormalize from "styled-modern-normalize";
import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600');  
  ${modernNormalize}

  html, body {
    font-family: Roboto, sans-serif;
    font-size: 10px;
    line-height: 1.5;
  }

  * {
    box-sizing: border-box;
  }
`;

위 코드에서 @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600'); 부분으로 인해 문제가 발생하고 있으며, 이를 제거할 필요가 있습니다.

index.html 파일의 inline style으로 import url을 변경하여 해당 이슈를 해결하였습니다.

<link
    type="text/css"
    media="screen"
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Roboto:400,500,600"
/>