1. Sass 프로젝트 셋팅

1. Github 레포지토리 생성 및 로컬 과 연결.
2. 기존 master 브랜치를 삭제 후 main 브랜치 생성 및 dev 브랜치 생성.
3. dev 브랜치를 default branch로 변경 (gitlab에서 진행)
4. .gitignore 파일 생성 및 node_modules.
5. package.json을 설치해준다.

npm init -y

1. node-sass를 설치해 준다.

npm i node-sass

1. package.json 파일에 node-sass 실행 명령어 추가

"scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "node-sass" : "node-sass",
		// styles디렉토리 밑에 main.scss 파일에 작성후, npm run sass 실행하면, root의 styles.css에 코드가 컴파일된다.
    "sass" : "node-sass styles/main.scss ./style.css"
  },

1. npm script 업데이트 하기 ( 저장할때마다 style.css에 반영되도록 변경)

"scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "node-sass" : "node-sass",
		// styles디렉토리 밑에 main.scss 파일에 작성후, npm run sass 실행하면, root의 styles.css에 코드가 컴파일된다.
    "sass" : "node-sass -w --recursive styles/main.scss ./style.css"
  },

1. Prettier 파일 루트디렉토리에 생성및 설정 파일 작성

{
  "semi": false,
  "singleQuote": true,
  "endOfLine": "lf",
  "tabWidth": 2,
  "useTabs": false
}

1. npm script 업데이트 : 개발자 도구에서 css가 아닌 scss로 디버깅 하기 위해서 --source-map true 추가

"scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "node-sass" : "node-sass",
		// styles디렉토리 밑에 main.scss 파일에 작성후, npm run sass 실행하면, root의 styles.css에 코드가 컴파일된다.
    "sass" : "node-sass -w --recursive --source-map true styles/main.scss ./style.css"
  },

2. Assets 폴더 생성및 이미지 export