본문 바로가기
Publishing/SASS

SASS(SCSS) 컴파일 하는 방법

by 오다다 코드 오다다 Code 2020. 3. 18.

SASS(SCSS)를 컴파일하기 위해선 node-sass를 설치해야 하고 node-sass를 설치하려면 node.js가 필요합니다.

아래 순서로 설치해주세요~

 

1. node.js 설치

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

안정적, 신뢰도 높음으로 설치해주세요.

설치 후 Command Prompt 창에 다음과 같은 명령어를 쳐 넣으면 node.js 와 npm 이 설치되어있는지 확인하실 수 있습니다.

node -v
npm -v
npm list -g

 

2. node-sass 설치

Command Prompt 창에 아래 명령어를 입력하면 node-sass가 설치됩니다.

여기서 -g 는 global 설치를 말합니다. 그러니 어느 폴더에서도 SASS 가 작동되게 설치를 하려면 -g를 붙여주세요.

npm install -g node-sass

 

3. SASS(SCSS) 컴파일하기

VS CODE

Extensions(shift + ctrl + x)에서 Live Sass Compiler를 설치합니다.

Live Sass Compiler

 

settings.json 파일에 SASS Compiler를 아래 설정을 추가합니다.

css, scss 폴더를 형제 구조로 설정했습니다. 변경하고 싶으시면 savePath를 변경하시면 됩니다.

"liveSassCompile.settings.formats":[
        // This is Default.
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../"
        },
        // You can add more
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../"
        },
        // More Complex
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../"
        }
    ],

 

확장자가 scss 파일을 만들어 작성후 하단의 Watch Sass를 누르면 css 파일로 컴파일 된다.

ex) comm.scss

'Publishing > SASS' 카테고리의 다른 글

SASS 기본  (0) 2020.03.30
SASS(SCSS) 컴파일 하는 방법  (0) 2020.03.18

댓글0