42page

Sass 설치 (npm 이용)

August 31st 2018

안녕하세요.

이번 포스팅에서는, Sass를 설치법에 대해 알아보겠습니다. Sass를 설치하는 방법은 여러 가지가 있지만, 저는 제가 이용하는 방법인 npm(Node Package Manager)를 이용해 설치하는 방법을 정리해 보고자 합니다.

NPM은 심플한 command line 프로그램이며, npm을 이용해 개발에 필요한 여러 가지 툴, 라이브러리, 프레임워크를 컴퓨터에 설치할 수 있습니다. 그리고 몇몇 반복되는 작업을 단순화하는데에도 이용할 수 있습니다.

목차 - npm 설치 - Sass compile 하기 - live-server 설치하기 - compile과 live-server 하나의 명령어로 작성하기

npm 설치

  1. npm설치를 위해 우선 node.js를 먼저 설치해야 합니다. 아래의 링크를 참조해 node.js를 컴퓨터에 설치합니다.   -링크 : node.js 설치
  2. npm 설치 완료 후, 터미널(윈도우면 command promt)에너 'node -v'를 입력하면, 현재 설치된 node.js의 버전을 확인할 수 있습니다.
node -v
  1. 터미널을 이용해 npm을 설치할 폴더로 이동을 합니다. 원하는 폴더로 왔으면, 터미널 창에 'npm init'을 입력합니다. 그러면 터미널 창에 package.json 파일을 생성하는 간단한 정보 입력란이 생성됩니다. 입력을 원하는 정보가 있으면 입력을 하고, 없으면 그냥 엔터를 눌러 파일을 생성합니다.
npm init
  1. 터미널 창에서 'npm install node-sass --save-dev'를 입력하면 해당 폴더에 Sass가 설치됩니다. 참고로, '--save-dev'를 입력함으로써 package.json 파일에 해당 프로젝트에 sass의 사용 내역을 기록할 수 있습니다.
npm install node-sass --save-dev
  1. Sass 설치 완료 후, package.json파일을 열어보면 아래와 같이 Sass 설치 내역을 확인할 수 있습니다.
"devDependencies": {
    "node-sass": "^4.9.3"
  }
  1. 만약 jquery이 필요하다면, npm install jquery --save 를 입력하면 jquery가 설치됩니다. 이경우에는 --save뒤에 -dev를 입력 안 했기 대문에 package.json파일에 아래와 같은 내용이 추가됩니다.
"dependencies": {
    "jquery": "^3.2.3"
  }
  1. dependencies는 프로젝트에 꼭 필요한 내용이 들어가고, devDependencies의 경우 도움을 주는 helper의 내용이 들어갑니다.
  2. 위와 같은 내역을 기록함으로써, 작업하다 파일을 동료 개발자에게 공유할 때, 개발한 파일과 package.json파일만 공유하면 동료 작업자가 쉽게 해당 프로젝트에 필요한 툴 등을 설치할 수 있습니다.
  3. package.json 파일을 함께 받은 동료 개발자는, 터미널에 'npm install'이란 명령어만 기입하면 해당 프로젝트에 필요한 파일을 설치할 수 있습니다.
npm install
  1. 삭제를 하고 싶은 파일이 있으면 아래 명령어를 입력하면 됩니다.
npm uninstall jquery --save

Sass compile 하기

  1. Sass를 compile하기 위에서 설치한 node-sass를 이용합니다. node-sass를 이용하기 위해서 package.json 파일에 scripts를 작성해 주어야 합니다.
  2. package.josn 파일 scripts란에 아래와 같이 입력해 줍니다. sass/main.scss은 input 파일의 경로이고 css/style.css는 아웃풋 파일의 경로입니다. '-w'를 추가함으로써 파일의 변경이 있을 때마다 compile이 되도록 할 수 있습니다.
"scripts": {
    "compile:sass": "node-sass sass/main.scss css/style.css -w",
},

live-server 설치하기

  1. live-server를 설치하면 html, css 작업 시 웹브라우저에서 실시간으로 출력된 화면을 보며 작업할 수 있습니다. 아래 명령어를 입력해 live-server를 설치합니다. -g는 global을 의미하며, 한번만 설치하면 다른 프로젝트 / 다른 폴더에서도 사용할 수 있습니다.
npm install live-server -g
  1. 맥의 경우 터미널에 위 명령어를 입력하면 에러가 발생할 수 있습니다. 그럴 경우 아래와 같이 명령어를 입력합니다.
sudo npm install live-server -g
  1. live-server를 설치했으면, 터미널에서 html 파일이 위치한 폴더에서 live-server 명령어를 입력하면 출력된 화면을 웹브라우저에서 볼 수 있습니다. 위의 compile:sass가 터미널에서 돌아가고 있으면, command + t를 눌러 새 창에서 명령어를 입력할 수 있습니다.

© Chanwhe Kim 2019

Handmade with .