node-sass에서 Dart Sass로 환경 전환하기

node-sass 오류

잘 작업하던 sass가 맥북 업데이트 이후 오류가 생겼다 ..

Error: Node Sass does not yet support your current
environment: OS X Unsupported architecture (arm64) 
with Unsupported runtime (111)

검색해보니
Sass 는 계속해서 시간이 지남에 따라 기능과 CSS 호환성 면에서 업데이트되고, Dart로 구현된 Dart Sass로 발전하였다고 한다.

그렇다면 내가 지금까지 쓰던 Sass는 무슨 Sass인지 궁금해졌다.
Sass는 2006년 Ruby로 처음 개발되었다가 C++로 포팅한 Libsass, node.js 환경에서 Libsass를 사용할 수 있는 node-sass 등 다양한 포팅 버전이 등장했고, node-sass는 Node.js 환경에서 사용할 수 있는 LibSass라고 한다. node-sass에서는 신규 Sass 기능을 이용할 수 없게 되었고 이전에 있다가 없어진 Ruby Sass 처럼 앞으로 없어질 예정이라고 한다
오류가 떴던 이유 중 하나가 node-sass는 Node.js 버전에 의존적이기 때문인데,
Dart Sass는 기존 노드 버전뿐만 아니라 현재 최신 LTS 버전에서도 사용할 수 있다.
즉, Dart Sass는 Node.js 버전에 대한 의존도가 높지 않아 설치 오류를 줄여줄 수 있는 장점이 있다!

LipSass
: https://sass-lang.com/blog/libsass-is-deprecated

Dart Sass 전환

그래서 이제는 Dart Sass를 쓰는 것을 권장하는데 이걸 사용하려면 기존에 쓰던 node-sass모듈을 제거하고 새로 설치해줘야 한다.

$npm uninstall node-sass && npm install sass

기존의 node-sass 에서는 npm runs sass 로 컴파일 해주었지만
sass scss위치 css위치 순으로 터미널에 작성해주어야 컴파일이 된다.

sass source/index.scss css/index.css

//저장할때마다 자동으로 업데이트 해주고 싶다면
sass --watch source/index.scss css/index.css

컴파일을 해주고 나니 기존의 SCSS 파일의 오류가 뜬다

why....?
Sass 문법에 변경사항이 있기 때문이다.

오류메세지의 경고를 해석해보자면 calc() 외부에서 / 를 사용하는 것은 Dart Sass에서 사용할 수 없다.. 라는 말인데

Deprecation Warning: Using / for division outside of calc() is 
deprecated and will be removed in Dart Sass 2.0.0.

/ 슬래시 기호는 나눗셈뿐만 아니라 grid 와 같은 속성값에서 다른 용도로도 사용되기 때문에 혼란을 방지하고자 나눗셈을 의미하는 / 는 Sass 내장 모듈인 math를 @use 'sass:math'로 불러와 부호를 math.div(분자, 분모)로 변경해야 한다고 한다.

https://sass-lang.com/documentation/breaking-changes/slash-div

node-sass

border-radius: $badge-size/2;

Dart Sass

border-radius: math.div($badge-size, 2);

이런식으로 작성을 해주어야 오류가 사라지고 정상적으로 컴파일이 된다!

참고한 블로그인데 자세한 설명이 나와있으니 다른 에러가 뜨신다면 아래 블로그에서 보고 해결하시는 것을 추천!
https://smartstudio.tech/node-sass-to-dart-sass/