[Sass/SCSS] 2. Sass/SCSS의 Compile 방법

 

Sass(SCSS)는 단독으로 동작할 수는 없습니다.

즉, 전처리기로 작성 후 CSS로 변환하여 최종적으로는 표준 CSS로 동작해야만 합니다.

 

여러가지의 변환 방식이 있지만, Javascript 개발 환경인 Node.js에서 사용할 경우 추천되는 방법들을 소개합니다.

 

(1) SassMeister

간단한 코드의 경우 compiler 설치가 부담될 때 사용.

Sass/SCSS 코딩을 CSS 로 실시간 변환.

SassMeister | The Sass Playground!

 

(2) node-sass

Node.js를 LibSass라는 compiler에 결합한 라이브러리.

 

NPM을 통해 전역 설치 후 사용.

$ npm install -g node-sass

 

$ node-sass [옵션] <입력파일경로> [출력파일경로]

$ node-sass scss/main.scss public/main.css

 

옵션은 하단의 사이트에서 확인할 수 있습니다.

GitHub - sass/node-sass: Node.js bindings to libsass

 

(3) Gulp

Gulp는 빌드 자동화 도구(Javascript Task Runner)로, gulpfile.js를 만들어 설정합니다.

 

NPM을 통해 전역 설치 후 사용.

$ npm install -g gulp

Sass Compiler인 gulp-sass를 개발 의존성(devDependency) 모드로 설치.

$ npm install --save-dev gulp gulp-sass

환경설정 하기.

// gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');

// Compile
gulp.task('sass', function () {
  return gulp.src('./src/scss/*.scss');  // 입력 경로
    .pipe(sass().on('error', sass.logError));
    .pipe(gulp.dest('./dist/css'));  // 출력 경로
});

// 런타임 중 파일 감시
gulp.task('sass:watch', function () {
  gulp.watch('./src/scss/*.scss', ['sass']);  // 입력 경로와 파일 변경 감지 시 실행할 Action(Task Name)
});

Compile하기.

$ gulp sass

런타임 중 파일 감시 모드 실행하기.

$ gulp sass:watch

 

(4) Webpack

은 너무 내용이 많아서 차후 정리할 것...

 

(5) Parcel

Parcel은 Web Application bundler로 단순한 변환이 가능합니다.

 

NPM을 통해 전역 설치 후 사용.

$ npm install -g parcel-bundler

Sass Compiler 설치.

$ npm install --save-dev node-sass

html 내에 <link> tag를 이용해 Sass 파일과 연결.

<link rel="stylesheet" href="scss/main.scss">

하단의 둘 중 하나로 실행.

$ parcel index.html
$ parcel build index.html

 

Compile된 Sass파일은 dist/에서 확인할 수 있고,

별도 포트 번호를 설정하지 않았다면 localhost:1234에서 적용 상태를 확인할 수 있습니다.