Sass 컴파일러 vscode 에서 사용하기

1. npm 설치

npm install sass -g

2. 버전 정보 확인

설치 완료 됐으면 버전확인하면서 잘 설치되었는지 확인합니다.

npm show sass version

3. Vs code에서 확장 프로그램 설치

SASS 컴파일을 자동으로 해주는 플러그인

1. live Sass compiler - 만든 이 : Glenn Marks

4.  sass complier 경로 설정

1. vscode 좌측 톱니바퀴 - 설정 클릭

2. 설정 json 파일 수정을 위해 우측 상단 설정 열기 클릭

3. 아래 구문 추가

{
  "liveSassCompile.settings.formats": [
    // This is Default.
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../../../public/css"
    },
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "~/../../../public/css"
    }
  ],
  // "liveSassCompile.settings.includeItems": [
  //   "www/assets/scss/**/*.scss",
  // ],
  "liveSassCompile.settings.generateMap": false,
  "liveSassCompile.settings.autoprefix": [
    "> 0.5%",
    "last 2 versions",
    "Firefox ESR",
    "not dead"
  ]
}

가장 중요한 것은 savePath 이다

본인의 프로젝트 경로에 맞게 설정을 해주어야 한다

 

나의 경우 리액트로 작업을 하고 있고

/

public/css/ : 여기가 sass 가 컴파일된 css 파일이 모이는 곳이다 (결과물)

src/assets/scss/user.scss : 여기서 내가 필요한 scss 코드를 작성 (원본)

 

savePath 를 현재 경로에 맞게 잘 설정을 해준다