SCSS
: CSS를 확장시킨 도구
- 브라우저는 SCSS를 이해하지 못함 👉 SASS로 SCSS 코드를 처리해서 CSS로 만듦
📌 SCSS & SASS 설치
- npm add -D sass
- CSS 파일 확장자 .SCSS로 변경
- html의 CSS 파일 주소 변경
<link rel="stylesheet" href="styles/style.scss">
📌 Vite의 Auto reload 기능
- 프로젝트 배포 시 해야할 일
- 변경 사항이 있으면 reload
- 콘솔에서 작업 중지: Ctrl + C
- npm run build
- 배포를 위한 dist 폴더가 생성됨
- dist 폴더의 index.html에 SCSS를 변환한 CSS로 코드가 있음
출처
노마드코더 CSS Layout 마스터클래스