Vite에서 모듈들 간단하게 설치해서 사용하기 (feat. sass) - 1편

 

프로젝트 생성 초기 폴더 구조

Vite로 프로젝트 생성 시, 초기 폴더 구조입니다

 

폴더 구조

 

 

1. SASS를 설치하기

 

npm i sass -D

package.json

 

package.json 파일에 sass가 설치되어 있는 것을 확인할 수 있다

 

 

 

SCSS로 스타일을 작성할 것이므로, 필요 없는 css파일 삭제하고 scss 파일 추가하기

 

style.css

style.scss

touch style.scss

 

 

3. 필요 없는 파일들 삭제하고 main.js에 추가한 style.scss를 가져오기(import)

 

javascript.svg

counter.js

public/vite.svg

main.js

 

 

4. 스타일 초기화를 위해 reset.scss를 추가하면서, 일부 폴더 구조를 변경했다

 

스타일 파일은 한 곳에 묶어두는 것이 좋다

main.js에 style.scss 경로 잘 확인하기  './scss/style.scss/

scss 폴더를 추가

 

style.scss에 reset.scss를 가져오기(import)

reset.scss 가져오기

 

 

5. scss로 스타일 적용해 보기

 

VScode

아주 잘 적용되는 화면 결과!!

scss 스타일 적용된 화면