gulp nodejs 업데이트 후 실행 시 Sass 오류

nodejs 와 node-sass 버젼 호환

 

Nodejs 최신 버전으로 업데이트 하고 나니 기존 gulp쪽에서 아래와 같은 에러가 발생하였습니다.

 

gulp 실행에러 메세지

Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime

 

Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (83)
For more information on which environments are supported please see:

보통 노드 버전을 업데이트 한 뒤에 나오는 에러 메세지

오류 원인은 node 버젼이 해당 Node-sass 버젼을 지원하지 않기 때문에 발생

node-sass 는 node 버젼에 의존적이라 node 버젼 업데이트시 node-sass 버젼도 확인

 

node-sass 삭제 후 최신 버전으로 새로 설치

기존에 설치된 해당 gulp-sass, node-sass를 제거해 줍니다.

gulp-sass: "^4.0.2"
node-sass: "^4.14.1"

 npm uninstall gulp-sass -D
 npm uninstall node-sass -D

삭제 후 최신 버전으로 설치해줍니다.

 

npm install gulp-sass -D
npm install node-sass -D

 

"gulp-sass": "^5.1.0",
"node-sass": "^7.0.1",

 

 gulp-sass 5 에러 메세지

Error in plugin "gulp-sass"

Message : gulp-sass 5 does not have a default Sass compiler; please set one yourself.

Both the 'sass' and 'node-sass' packages are pemitted.

 

 

 

해결방법

gulp 셋팅파일에서 sass 부분을 아래와 같이 수정합니다.

 

const gulpSass = require("gulp-sass");
const nodeSass = require("node-sass");
const sass = gulpSass(nodeSass);


// gulpLoadPlugins 사용 시
const $ = gulpLoadPlugins();

$.sass({
//아래 스타일로 수정
sass({
    outputStyle: "compact", // nested, expanded, compact, compressed
    indentWidth: 4,
    linefeed: "crlf",
    functions: sassFunctions(),
})