node-sass 설치 오류

ioioi·2023년 9월 4일

SCSS

목록 보기

3/7

npm i node-sass

위 방법으로 설치했으나 설치 오류로 인해 코드 한 줄도 못 치는 상태^0^

npm ERR! code 1
npm ERR! path /Users/경로
npm ERR! command failed

노드 버전에 맞춰서 버전 지정해서 설치해도 오류 났다^^ 하....
여러 가지 방법을 시도했지만 설치가 안 돼서 낙담할 때 인프런 질문&답변 보고 재설치를 해주었더니 설치 성공했다😻

npm i -D sass

답변해 주신 분 중에 6버전, 7버전이 설치 시 오류 발생한다고 알려주셨는데 나는 위 코드로 설치해서 잘 사용하고 있다. 설치할 때마다 느끼는 거지만 쉽게 쉽게 넘어가는 법이 없다ㅠㅠ

✅ node_modules 파일 생성되었다면 설치 성공!

npm cache clean --force
npm i node-sass

npm i node-sass@<원하는버전>

다운로드를 성공했다면 scripts에 옵션 추가하기.
dart-scss는 이전의 node-sass와는 몇 가지 설정이 달라 오류가 발생했다ㅠㅠ
'node-sass'의 옵션인 --recursive를 사용할 수 없다는 것!

'styles/' 디렉토리(및 모든 하위 디렉토리)의 모든 '.scss파일'을 현재 디렉토리에 있는 동일한 경로의 '.css파일'로 컴파일하고 싶다면?

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "sass": "sass -w styles/:."
}

'styles/main.scss' -----> './main.css'
'styles/detail.scss' -----> './detail.css'

이때, '.map' 소스맵 파일도 자동 생성되는데 소스맵은 컴파일된 css 파일과 원본 scss 파일 사이의 관계를 지정해 준다. 검색해 보니 개발자 도구에서 원본 scss 파일의 위치를 직접 보고 디버깅할 수 있게 해준다고 한다.

❌ 소스맵 파일 생성되지 않게 하려면 아래와 같은 코드로 작성

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "sass": "sass -w styles/:. --no-source-map"
}

설정은 여기까지!

UIUX/Frontend