node 프로젝트 > Sass(SCSS) 사용하기

Sass 로고

ruby-sass?

libsass??

node-sass???

dart-sass????

sass-loader??????????

 

무엇을 설치해야 하는지 모르겠어서 정리를 해봤다.

---

Sass(SCSS)를 사용하기 위해 어떤 걸 설치할까?

Sass(SCSS)는 Ruby 기반이다. (Ruby-sass)

- Ruby on rails 설치 후 사용

 

Ruby 아닌 다른 환경에서 사용하려면, C/C++ 언어 기반의 Libsass 를 사용해야 한다.
(Ruby 기반보다 컴파일이 빠른 장점이다.)

 

Node 환경에서 사용하려면, Node-sass가 필요하다.

Sass(SCSS) 파일을 로드하고, 컴파일 해주기 위해서 Webpack의 Loader인 Sass-loader와 함께 쓰면 된다.

 

그러나!

2020년부터 Libsass, node-sass는 deprecated.

 

그렇다면 앞으로 무엇을 써야 하는가?

Dart 기반의 Sass를 사용하면 된다! (최신 Dart-sass)

Sass(SCSS) 파일을 로드하고, 컴파일 해주기 위해서 Webpack의 Loader인 Sass-loader와 함께 쓰면 된다.

 

* 컴파일 속도 : Dart > C/C++ > 루비

---

Libsass (2020년부터 deprecated)

- Ruby 아닌 다른 환경도 지원하기 위한,  C/C++ 언어 기반의 라이브러리

 

Node-sass (2020년부터 deprecated)

- Node 환경에서 Sass를 사용하기 위한 도구

 

Sass (최신)

- Dart 언어 기반의 Sass 라이브러리 (현재 Dart 언어 기반)

- Node-sass 보다 약간 빠름

 

Sass-loader (Loader & Complier)

- Sass/SCSS 파일을 로드하고, CSS로 컴파일

---

Nods-sass 사용 시 package.json

{
  "devDependencies": {
    "sass-loader": "^7.2.0",
    "node-sass": "^5.0.0"
  }
}

 

Dart Sass 사용 시 package.json

{
  "devDependencies": {
    "sass-loader": "^7.2.0",
    "sass": "^1.22.10"
  }
}