![[웹개발] GitHub Pages에 CSS가 적용되지 않는다..! 그 해결책](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F5Lgb6%2FbtqQhLMN5Ju%2FAAAAAAAAAAAAAAAAAAAAAF4UVXMYg4fJNxABrwQKwQo97FGYPnh9JAmZK9Lg8Y9W%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1764514799%26allow_ip%3D%26allow_referer%3D%26signature%3DbGGJLzkufxtxTGKo8O81Bwh2WtQ%253D)
포트폴리오 사이트를 만드는데 별안간 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 |