Live Sass 컴파일하기

📡 Live Sass 컴파일하기

안녕하세요 TriplexLab 입니다.
오늘은 VS code에서 Live Sass Compiler 확장 프로그램에 관해서 살펴보도록 하겠습니다.

뭐 사실 실무에서는 Node.js를 사용해 npm에 있는 node-sass을 사용하겠지만
여기서는 초 간단하게 scss를 사용하고 싶은 분들을 위해서 설명을 하도록 하겠습니다.

예를 들어서 다음과 같은 디렉토리 구조가 있다고 합시다.

scss 디렉토리 구조

다음과 같은 Live Sass Compiler 확장 프로그램을 설치 합시다.

Live Sass Compiler

이 확장프로그램은 폴더별 컴파일 기능을 지원해줍니다.

확장프로그램 설치 후 settings.json파일을 열고 
아래와 같이 설정해주면 각각의 디렉토리 경로안에 scss 파일을 css 파일로 컴파일해준다.

"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": null,
    "savePathSegmentKeys": ["scss"],
    "savePathReplaceSegmentsWith": "css"
  },
]

 

결과👇

각각의 디렉토리 경로안에 scss 파일을 css 파일로 컴파일 하는것이 원한다면 이대로 작업을 진행 하면 됩니다.

각각의 디렉토리 경로안에 scss 파일을 css 파일로 컴파일해준다.

여기까지 테스트 해본것을 파일로 공유합니다.
궁금하신 분들을 다운로드 받아서 확인 해보세요 👏👏

scss 파일.zip

0.00MB

---

저는 한가지 궁금한것이 생겼습니다.
하나의 index.scss에서 각각의 scss 파일을 @import해와서 하나의 css로 컴파일 하는것 입니다.

직접 test를 해보니 아주 잘 됩니다.👍👍
(참고로 scss에서 _가 들어간 파일은 css로 변환하는 작업을 무시하게 해주는 역할을 합니다.)

/* scss/index.scss */

@import './mo/_index.scss';
@import './pc/_index.scss';

하나의 index.scss에서 각각의 scss 파일을 @import해와서 하나의 css로 컴파일 해준다.

이것도 여기까지 테스트 해본것을 파일로 공유합니다.
궁금하신 분들을 다운로드 받아서 확인 해보세요 👏👏

scss 파일.zip

0.00MB