feat: [LINKER-23] vanilla extract global style 설정 #8
Conversation
|
허걱 제가 작업을 하다 ts 버전을 바꿔버린것 같아요..ㅜ 다시 낮춰놓을게요 yarn berry를 처음 써봐서 vs code에 이것저것 설정해줄게 있더라구요 그거 만지다가 저렇게 된것 같습니다! |
services/web/src/app/layout.tsx
Outdated
| @@ -1,5 +1,6 @@ | |||
| import type { Metadata } from 'next'; | |||
| import { Inter } from 'next/font/google'; | |||
| import { GlobalStyle } from './constants/style.css'; | |||
There was a problem hiding this comment.
import './constants/style.css';밑에 className 코드 제거하고, 요렇게는 적용 안되나요!?
| import { globalStyle } from '@vanilla-extract/css'; | ||
|
|
||
| export const GlobalStyle = [ | ||
| globalStyle('html, body', { | ||
| margin: 0, | ||
| padding: 0, | ||
| overflowX: 'hidden', | ||
| height: '100%', | ||
| }), | ||
| globalStyle('*, *:before, *:after', { | ||
| boxSizing: 'border-box', | ||
| }), | ||
| globalStyle('focus', { | ||
| outline: 'none', | ||
| border: 'none', | ||
| }), | ||
| globalStyle('button', { | ||
| background: 'none', | ||
| padding: 0, | ||
| border: 'none', | ||
| cursor: 'pointer', | ||
| }), | ||
| globalStyle('a', { | ||
| color: 'inherit', | ||
| textDecoration: 'none', | ||
| cursor: 'pointer', | ||
| }), | ||
| globalStyle('table', { borderCollapse: 'collapse', borderSpacing: 0 }), | ||
|
|
||
| globalStyle('img, picture, video, canvas, svg ', { display: 'block', maxWidth: '100%' }), | ||
| ]; |
There was a problem hiding this comment.
app 폴더말고 src/styles/global.css.ts 형태의 구조로 가면 좋을 것 같아요!
| globalStyle('html, body', { | ||
| margin: 0, | ||
| padding: 0, | ||
| overflowX: 'hidden', | ||
| height: '100%', | ||
| }), |
There was a problem hiding this comment.
https://necolas.github.io/normalize.css/8.0.1/normalize.css
styles/normalize.css 파일 만들어서 위에 코드 복붙하고, 저기서 제공되지 않는 것들만 추가로 global.css.ts 파일만들어서 해봐도 좋을 것 같아요!
There was a problem hiding this comment.
global style 의 html, body에 아래 코드 추가 부탁드려도 될까요!?
html {
/* 62.5% of the base size of 16px = 10px.*/
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}https://yozm.wishket.com/magazine/detail/1410/
저희 웹앱 서비스만들때 rem으로 사용했으면 좋겠다고 생각해서입니다!
|
전역으로 사용하는 스타일, 타입 등만 src/* 구조로 가고, src/app/* 에서의 구조는 아래 링크 참고해서 해봐도 괜찮을 것 같은데, 어떻게 생각하시나요!? |
|
|
에픽이 아니라서 라벨 제거했어요! 🙇♂️ |
작업 내용
폴더구조 관련해서 함께 논의해보면 좋을것 같아 노션에 정리해뒀어요!(https://www.notion.so/yapp-workspace/e228faeef7814a87bc80fec039521440?pvs=4)
반영 화면
아래 작은 LINKER 텍스트가 버튼인데 reset 설정을 해서 반영이 된것을 확인할 수 있었습니다!
궁금한점
@useonglee