2021. 12. 21. 21:41ㆍProgramming/React
Remix에 Pico.css를 적용해보자
React 기반 풀 스택 프레임워크라고 소개된 Remix. 대충 Blog tutorial를 따라서 해봤는데, CSS와 관련된 내용이 하나도 없더라구요. 기왕 마크다운을 읽고 쓰는 것 까지 됐는데말이죠. 그래서 좀 꾸며볼까하다가 얼마전에 건너건너로 들은 10Kb미만의 CSS 프레임워크, Pico.css를 적용해보기로 합니다. 당연히 삽질에 삽질을 했지만 검색해봐도 뾰족한 답이 없었기에, 나중에 까먹으면 찾아보려고 작성합니다.
Pico.css를 설치하자
Pico.css의 Getting Started 페이지를 보면 Pico.css를 설치하기 위한 세 가지 방법이 나와있습니다.
Pico.css 다운로드 후 <head/>에 넣거나, unpkg CDN을 이용해서 <head/>에 넣어주는 방법, 그리고 npm install @picocss/pico 명령어를 입력해서, npm 을 통해 설치하는 방법이죠. 일단 npm install @picocss/pico 명령어를 통해 설치해줍니다.
Root.tsx에 Pico.css를 추가해주자.
아무리 봐도 모르겠어서 이미 Remix + Pico.css를 적용해보신 분께 질문드렸었는데... 머쓱하게도 공식 문서의 Remix Guides - Styling 페이지에 잘 나와있습니다. 가장 첫 줄을 잘 읽어봅시다.
The primary way to style in Remix (and the web) is to add a
<link rel="stylesheet">to the page. In Remix, you can add these links via the Route Module links export at route layout boundaries. When the route is active, the stylesheet is added to the page. When the route is no longer active, the stylesheet is removed.
일반적으로 스타일을 추가하는 방법은 link를 페이지에 추가하는 방법인데, Remix에서는 Route module links를 export함으로써 route layout 경계에 추가하는게 가능하다고 합니다. 대충 route가 동작하면 페이지에 스타일시트가 추가되고, route가 더 이상 동작하지 않으면 스타일시트가 제거된다고 하네요. 대충 다음과 같이 함수를 exports해주면 됩니다.
export function links() {
return [
{
rel: "stylesheet",
href: "@picocss/pico/css/pico.min.css"
}
];
}그리고 root.tsx의 <head/>에 <Links>를 추가해주도록 합시다. 그리고 개발자 도구를 열어보면, 짜잔! <head/>에 pico.min.css가 추가된 걸 확인할 수 있습니다.
import { Links } from "remix";
// ...
export default function Root() {
return (
<html>
<head>
<Links />
{/* ... */}
</head>
{/* ... */}
</html>
);
}이렇게 간단한 걸 못해서 삽질을 하고 있었습니다. 휴우...
'Programming > React' 카테고리의 다른 글
| [React] MutableRefObject와 LegacyRef (1) | 2022.02.04 |
|---|