[VSCode] scss(sass)를 이용하여 css 컴파일 하기.

vscode 실행하여 Extensions에 들어간다.

live sass를 검색 해보면 Extensions 목록에 

Live Sass Compiler 가 있다. 그리고 Live Sass Compiler을 사용하기 위해선 컴파일하고 화면에서 확인하기 위해선 가상서버를 생성해주는 Live server 익스텐션도 필요하다.

# 설치 (install)

Live Sass Compiler

Live server

 

설치를 했다면 따로 설정이 필요하다.

설정에 대한 내용은 아래 URL에 상세히 나와 있다.

ritwickdey/vscode-live-sass-compiler

 

"liveSassCompile.settings.formats":[
    // 기본설정
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": null
    },
    // 추가하여 작성가능
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "/dist/css"
    },
    // 더 상세하게 설정가능
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "~/../css/"
    }
 ]
 
 // format : css로 컴파일하는 종류

// extensionName : 컴파일 하는 css 이름 (.css로 할경우 scss의 파일명으로 컴파일 된다.) 이름을 추가하면 scss 명 뒤에 이름으로 붙는다. 
// ex) test.scss 이고 extensionName 을 style.css 로 설정하고 컴파일하면 teststyle.css 로 컴파일 된다.

// savePath : 컴파일 되어 저장되는 경로설정. /는 프로젝트의 폴더를 의미 한다.

format : css로 컴파일하는 종류

extensionName : 컴파일 하는 css 이름 (.css로 할경우 scss의 파일명으로 컴파일 된다.)

이름을 추가하면 scss 명 뒤에 이름으로 붙는다. 

ex) test.scss 이고 extensionName 을 style.css 로 설정하고 컴파일하면 teststyle.css 로 컴파일 된다.

위와 같은 설정을 vscode에서 작성하는 방법을 알아보겠습니다.

 

1. vscode를 실행. 그러면 하단 우측에 톱니바퀴 모양을 클릭하면 Settings 메뉴를 클릭합니다. 또는 File > Preferences > Settings를 클릭! 그럼 셋팅 화면을 확인할 수 있습니다.

 

2. settings.json 파일 열기

User로 선택하고 

오른쪽상단에 셋팅을 볼수 있는 버튼을 클릭해주면 settings.json 파일을 열수 있다.

 

3. 작성하기.

열면 위와 같이 무언가 설정이 작성되어 있을 것이다.
live Sass 설정을 위해선 중괄호안에 쉼표를 추가하고 아래에 더 작성해주면 됩니다.

제가 기본으로 설정한 내용은 아래와 같이 추가 하였습니다.

// 컴파이리 포맷 방식 작성.
"liveSassCompile.settings.formats": [

    {
        "format": "compact",
        "extensionName": ".css",
        "savePath": "/css"
    }
],
// 특정폴더를 제외한다. 폴더 내의 모든 sass/scss 파일을 무시한다.
"liveSassCompile.settings.excludeList": [ 
    "** / node_modules / **",
    ".vscode / **"  
],
// map 파일 사용 유무(Default : true) - 소스맵 사용안할 경우 false로 설정
"liveSassCompile.settings.generateMap": true,
// 자동 밴더 프리픽스 사용하게 해줌.
"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
]

셋팅을 저장후 임의로 프로젝트 폴더의 scss 파일을 만들고 test를 해보자.

vscode 우측 하단에 보면 

Watching이라는 버튼이 있는데 이걸 누르면 Watch Sass로 바뀌면서 내가 수정하는 scss 파일을 실시간 감시하여 

수정하고 저장하면 알아서 css로 자동 컴파일 해준다.

위 설정을 하여 컴파일 할 경우 

프로젝트 안에 css 파일안에 css로 컴파일되는 것을 확인하실 수 있습니다.
궁금한 점이나 부족한 점이 있다면 댓글 그리고 조금이나마 힘이 될 수 있도록 광고 한번 클릭 부탁 드립니다.

감사합니다. ^^