[sass] sass 컴파일러로 css 파일 만들어보기

1. extension 설치부터 한다. vscode 에서 sass , sass compiler , sass indent??

 

2.vscode setting 을 해준다.

command pallet 를 열고 setting.json 을 검색해보면 3가지 연관검색어가 뜬다.

 

3가지의 차이는 중간에 있다. workspace 가 있는게 있고 default 가 있는게 있고 아무것도 없는게 있다.

 

일단 default 에 들어가보면 기본 설정들이 들어있다. 그러니 까 만지지말자 ㅎㅎ

 

그다음 우리는 기본설정들을 변경해줄수 있는데 그 내용이 첫번째 setting 에 들어 있고 거기서 수정할수 있다.(내 vscode 의 현재설정)

 

그리고 중간에 workspace 가 들어간게 있는데 이거는 해당 폴더에 해당하는 vscode 설정이다. (해당폴더의 vscode 의 현재설정)

 

"liveSassCompile.settings.formats":[
      {
          "format": "expanded",
          "extensionName": ".css",
          "savePath": "/css"
      }
  ],
  "liveSassCompile.settings.excludeList": [
      "**/node_modules/**",
      ".vscode/**"
  ],
  "liveSassCompile.settings.generateMap": true,
  "liveSassCompile.settings.autoprefix": [
      "> 1%",
      "last 2 versions"
  ]

위와 같은 설정을 필요에 따라 내가 사용하는 vscode 전체에 적용해줄수 있고 현재폴더에만 적용할수도 있다 그건 알아서 하는건데

거의다 workspace 에 설정해주지 않을까 싶다. ?? 나는 그럴 생각이다.

 

"savePath" : 여기에 파일경로를 설정을 해주면 해당 scss 파일은 해당경로로 css 파일로 컴파일되어 위치한다.

 

참고로 / 는 vscode 의 가장 상위 폴더를 이야기 하고 ~는 현재 파일의 위치를 나타냄으로 

필요에 따라 위치를 잘 설정 해주면 된다.

 

위의 예시는 가장상위폴더에 css 폴더를 만들고 거기에 컴파일 한다는 뜻이다.

추가적으로 위사진에서 .vscode 는 위에서 workspace setting.json 을 설정해주면 생기는 폴더와 파일이다

 

다음 sass 내용에서는 nest 에 대해서 다뤄보자 굿굿굿