[SCSS] SCSS 컴파일
지난 포스트에서 SCSS
를 소개하면서 SCSS
를 웹에서 사용하기 위해서 컴파일 과정을 거쳐야한다고 언급했습니다. 그래서 이번 포스트에서는 SCSS
사용법에 앞서 SCSS
를 컴파일하는 여러 방식들에 대해서 알아보도록 하겠습니다.
컴파일하기
SassMeister
SassMeister
는 온라인으로 .scss (또는 .sass)
파일을 컴파일해 적용시킬 수 있는 사이트입니다. 온라인 웹 사이트를 이용하기 때문에 컴파일러를 따로 설치하기가 부담되는 상황에서 이용하기 좋은 방법입니다.
SCSS를 공부하면서 만들어볼 코드들은 간단한 코드이기 때문에
SassMeister
를 사용해서 작성할 예정입니다.
VScode Extension 이용
VScode
를 이용할 경우 sass
, sass Lint
, live sass compiler
, live server
를 설치해서 scss를 컴파일 할 수 있습니다.
node-sass
node-sass
는 Node.js 플랫폼에서 SASS(SCSS)를 사용할 수 있게 해주는 라이브러리입니다. 저도 SCSS
를 처음 접할 때 이 라이브러리를 사용했었습니다.
당연히 npm 패키지 라이브러리이기 때문에 Node.js가 설치되어있어야합니다.
노드 설치 후 node-sass
를 설치합니다.
npm install -g node-sass
//만약 전역 설치하기 싫다면, -g 옵션을 빼 주세요.
설치 후 node-sass -v
를 입력했을 때 버전이 뜬다면, 라이브러리 설치에 성공한 것 입니다.
node-sass
로 컴파일은 다음과 같은 명령으로 수행합니다.
node-sass 옵션 [입력 파일] [출력 파일]
/*
입력 파일: 컴파일 하고자 하는 .scss, .sass 파일
출력 파일: 컴파일 후 나오는 .css 파일
*/
이렇게 SCSS(SASS)
파일을 컴파일 하는 방법에 대해서 알아봤습니다. 위 소개한 방법 세 가지가 대표적인 컴파일 방법이고, 더 많은 컴파일 방식이 있으니 본인에게 편한 방식을 이용하시면 됩니다.
참조
Author And Source
이 문제에 관하여([SCSS] SCSS 컴파일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bami/SCSS-SCSS-컴파일저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)