SASS 컴파일 하기 (window)

  SASS 컴파일을 위해 node-sass가 필요하고

  node-sass를 설치하려면 node.js가 있어야합니다.

---

1. node.js 설치하기

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

 

https://nodejs.org/ko/  

Node.js

'안정적, 신뢰도 높음'을 설치해주세요'안정적, 신뢰도 높음'을 설치해주세요

 

 

설치후 '윈도우' + 'S'를 눌러  Node.js command prompt 를 검색하여 열어주세요.

아래 명령어를 입력하여 node.js와 npm 설치를 확인합니다. (버전 정보가 나와야 잘 설치된 것)

node -v
npm -v
npm list -g

 

 

---

2. node.sass 설치하기

 Node.js command prompt  창에 다음 명령어를 입력하여

node-sass를 설치합니다.

npm install -g node-sass

※ -g는 글로벌 설치를 의미하며, 모든 폴더에서 sass가 작동되게 하기위해 붙여줍니다.

 

 

 

---

3. SASS 컴파일하기

 VS code 

extension 창에서 Live Sass Compiler를 설치합니다.

 

VS code의 settings.json 파일에 SASS Compiler의 설정을 추가 합니다.

css, sass 폴더를 형제 구조로 만든 명령어입니다. 

'savePath'를 변경하여 원하는 구조로 바꿀 수 있습니다.

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

 

 

---

4. SASS 폴더 생성, 컴파일 하기

1. dist폴더 안에 scss폴더를 만듭니다.
2. scss폴더 안에 comm.scss파일을 만들고 코드를 작성한 후 하단의 Watch Sass를 클릭합니다.
3. 자동으로 css폴더 안에 comm.css가 생성되었는지 확인합니다.
4. scss코드를 추가로 작성하고 save 하면 자동으로 컴파일됩니다.