(netlify) 배포 시 styled-components가 적용이 안되는 에러 해결

netlify 배포 직후 모습은 이렇게 되어야 하는데,,

배포하니까

styled-components 가 적용이 하나도 안된 모습이었다.

그래서 열심히 구글링 하던 중 발견한 코드의 문제점은 !!

import { createGlobalStyle } from 'styled-components';

const Style = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');


@font-face {
    font-family: 'PartialSansKR-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/PartialSansKR-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

  * {
font-family: "Rajdhani", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  body {
    margin: 0;
    width: 100vw;
    background-color: rgb(27, 29, 32);
    color:white;
    border-top: 2px solid rgba(99, 99, 99, 0.349);
  }

  nav {
    position: sticky;
    top: 0;
  }

  main {
    //width: 80%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  footer {
    position: relative;
    bottom: 0;
  }

  a {
    text-decoration: none;
  }
  main {
    margin:0;
  }
  
`;

export default Style;

createGlobalStyle을 사용해 css를 공통적으로 적용시켜줬는데 @import를 해준 것이 문제였다.

 

왜 문제인지 찾아보니까 
createGlobalStyle을 사용하여 전역 스타일을 정의할 때, 외부 스타일시트를 @import로 가져오면 번들 크기를 증가시킬 수 있고, 외부 리소스에 대한 추가 요청을 발생시킬 수 있기 때문에 좋지 않은 방법이라고 한다.

 

import를 하고싶다면

@import 대신 HTML의 <link> 태그를 사용하여 폰트를 가져오는 방법을 추천한다.