css (3) 썸네일형 리스트형 [solved]css nested with flex not work when build code 1. module.css 쓰는중 2. scss 아님. 3. 3중 Nested 에서 적용 안되는 현상 발견 4. dev 모드에서는 잘 나오는데build 시에만 안됨 5. Flex만 안되고 다른 코드들은 다 적용이 됨 결론: 빌드시 최적화할 때, 내가 오해여지를 남겨놔서 링커가 이상하게 최적화를 해버렸다. 보자. 원인: css Nested 된다고해서 스타일 코드 깔끔히 하려고 무지성 nested안하다가 빌드할때 이상한 css 최적화에 스타일 코드 날라감 해결방법: DOM 구조 따라가는 nested 하면 됨. [css] & + & 알아보기 const NewsItemBlock = styled.div` & + & { margin-top : 3rem; } `; & 은 부모 태그를 가리킵니다. 저 상황에서는 div 를 가리킵니다. {urlToImage && ( )} {title} {description} & + & 하면 &의 부모의 &의 바로옆 & 를 가르킵니다. 첫번째 포스트에서 아래포스트를 가리키고 두번째 포스트에서는 세번째 포스트를 가리키고 세번째 포스트에서는 네번째 포스트를 가리킵니다. 그리고 margin-top: 3rem; 을 주면 맨위랑 맨밑에는 적용안되고 사이간격만 조정할수 있습니다. [react] 스타일링 설정하기 Sass 사용하기 Sass 는 .sass 확장자와 .scss 확장자를 지원합니다. 보통 .scss 확장자를 사용합니다. yarn add node-sass 이 라이브러리는 Sass 를 css로 변환해줍니다. sass-loader 설정 커스터마이징하기 create-react-app 으로 만든 프로젝트는 구조의 복잡도를 낮추기 위해 세부 설정이 숨겨져 있습니다. 이를 커스터마이징하려면 프로젝트 디렉터리에서 yarn eject 명령어를 통해 세부 설정을 밖으로 꺼내 주어야 합니다. (commit 한후) yarn eject webpack.config.js 에서 "sassRegex" 두번째 탐색결과에서 use 부분을 아래와 같이 수정합니다. { test: sassRegex, exclude: sassModuleReg.. 이전 1 다음
