[웹개발] GitHub Pages에 CSS가 적용되지 않는다..! 그 해결책

포트폴리오 사이트를 만드는데 별안간 css가 적용이 안된다.

다른건 다 적용되는데

나의 경우 여러가지 문제가 복합적으로 있었다.

먼저 원본 코드(index.html)이다. 여기서 <%= BASE_URL %>는 ./였다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="<%= BASE_URL %>_variables.css" type="text/css">
    <link rel="stylesheet" href="<%= BASE_URL %>_font.css" type="text/css">
    <link rel="stylesheet" href="<%= BASE_URL %>_reset.css" type="text/css">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

문제 1. 경로의 문제

github에 Repository의 이름은 MyPortfolio였고, 포트폴리오 사이트 Url은 eden1109.github.io/MyPortfolio였다.

그렇다면 css파일이 index.html과 같은 파일에 있다는 가정하에, 경로가 /MyPortfolio/_font.css 가 되어야한다.

따라서 vue.config.js의 BASE_URL을 /MyPortfolio/ 로 변경하였다.

경로는 /Repository 명/폴더명/어쩌구.css가 되는 것이다.

여기서 폴더가 index.html 기준 경로로 ../를 사용해야하는 경우라면 일이 복잡해진다. 그냥 쉽게 바꾸자...

문제 2. 파일명의 문제

파일명을 잘 보면 언더바(_)로 시작한다. 나는 처음에 별 생각없이 강사분께서 쓰신 파일명을 그대로 썼다.

이것때문에 거진 5시간을 넘게 날려먹었는데, 결론적으로 말하자면 언더바로 시작하는 css파일은 인식을 못한다.

따라서 _font.css를 font.css 등과 같이 변경했다.

이외 추가적으로 도메일을 변경해서 나의 포트폴리오 사이트 url은 eden1109.github.io/MyPortfolio 에서

poison-dog.com이 되었고 css파일들을 styles라는 폴더를 만들어 정리하였다.

따라서 최종적인 index.html의 코드는 다음과 같다. <%= BASE_URL %>는 ./였다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="<%= BASE_URL %>styles/variables.css" type="text/css">
    <link rel="stylesheet" href="<%= BASE_URL %>styles/font.css" type="text/css">
    <link rel="stylesheet" href="<%= BASE_URL %>styles/reset.css" type="text/css">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

혹시 몰라 나의 폴더 구조를 공유한다.

여러분은 저 처럼 시간 버리는 일 없길 바라며...

'개발이야기' 카테고리의 다른 글

[Unity] Hinge Joint의 표기오류 (0)	2021.06.06
[Unity] 화면에 맞게 UI와 Sprite 크기 조절하기 (0)	2020.12.30
[웹개발] GitHub Pages에 Custom Domain(커스텀 도메인)을 연결해보자! (0)	2020.12.16
[Git] GitHub와 GitLab, Sourcetree로 연동하고 Push 해보자! (0)	2020.12.16
[웹개발] Vue.js, GitHub Pages에서 작동을 안 해요! GitHub Pages 사용법 (0)	2020.12.16

문제 1. 경로의 문제

문제 2. 파일명의 문제

'개발이야기' 카테고리의 다른 글

티스토리툴바