Sass 개발환경 구성

1. Sass Install -> npm i sass / yarn add sass

2. Github -> Create Repository (Remote URL Copy)

3. LearnSass -> git init

4. LearnSass -> git remote add origin <Remote URL>

 

@DESKTOP-HV49LDQ MINGW64 ~
$ cd likelion

@DESKTOP-HV49LDQ MINGW64 ~/likelion
$ mkdir LearnSass

@DESKTOP-HV49LDQ MINGW64 ~/likelion
$ cd LearnSass

@DESKTOP-HV49LDQ MINGW64 ~/likelion/LearnSass
$ ls

@DESKTOP-HV49LDQ MINGW64 ~/likelion/LearnSass
$ npm i sass

added 17 packages, and audited 18 packages in 1s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

@DESKTOP-HV49LDQ MINGW64 ~/likelion/LearnSass
$ ls
node_modules/  package-lock.json  package.json

@DESKTOP-HV49LDQ MINGW64 ~/likelion/LearnSass
$ mkdir scss

@DESKTOP-HV49LDQ MINGW64 ~/likelion/LearnSass
$ touch scss/style.scss

@DESKTOP-HV49LDQ MINGW64 ~/likelion/LearnSass
$ ls
node_modules/  package-lock.json  package.json  scss/

@DESKTOP-HV49LDQ MINGW64 ~/likelion/LearnSass
$ code .

@DESKTOP-HV49LDQ MINGW64 ~/likelion/LearnSass
$ npm show sass version
1.57.1

@DESKTOP-HV49LDQ MINGW64 ~/likelion/LearnSass
$ git init
Initialized empty Git repository in C:/Users/사용자이름/likelion/LearnSass/.git/

@DESKTOP-HV49LDQ MINGW64 ~/likelion/LearnSass (master)
$ git remote add origin https://github.com/깃허브아이디/LearnSass.git

@DESKTOP-HV49LDQ MINGW64 ~/likelion/LearnSass (master)
$ git remote -v
origin  https://github.com/깃허브아이디/LearnSass.git (fetch)
origin  https://github.com/깃허브아이디/LearnSass.git (push)

 

git ignore 추가하기

npx add-gitignore node,windows,osx,visualstudiocode

 

Live Sass Compiler Extension

위의 익스텐션을 이용하면 GUI로 쉽게 watch할 수 있다.

"liveSassCompile.settings.formats": [
    // This is Default.
    {
      // 배포할 때 compressed!
      // "format": "compressed",
      // "extensionName": ".min.css",
      "format": "expanded",
      "savePath": "/css"
    }
  ]

settings.json에 위의 코드를 추가하면 format, extensionName, savePath를 수정할 수 있다.

 

CLI 방식

 "scripts": {
    "start": "",
    "sass": "sass scss:styles",
    "watch": "npm run sass -- --watch"
  },

package.json에 위의 코드를 추가하면 익스텐션을 사용하지 않고 CLI명령어로 실행이 가능하다.

 

$ npm run sass

> sass
> sass scss:styles

 

 

왼쪽처럼 styles폴더 하위에 생성된 것을 확인할 수 있다.