CodeHoon

최근에는 거의 항상 Tailwindcss만 써서 직접적으로 css 를 import 해서 사용하지 않았기 때문에 다르게 쓰는 방식을 몰라 헤매었다.

SCSS Module Import Error In TypeScript 

에러가 발생하였는데, 계속 잡히지 않아서 이거저거 또 검색해보았다.

Perplexity, Cursor 에서도 제대로 에러를 찾아내지 못했고, 인터넷서칭으로 알아내었다.

React.ts 를 이용해서 개발중이었는데,

1. @import  대신 @use 를 사용

원래는 additionalData 에 @import 값을 넣어서 사용했는데, 2021년부터 @import 대신 @use 를 쓰도록 권장했다고 한다..

2. 추가적으로 사용하는 @forward

@use 를 위에 써주고 @forward 를 써서 redirect 해준다.

이렇게 사용하면 해당 파일만 index에서 import 해주어도 전역에서 사용이 가능하다. 

다른 경로의 파일에서 사용한 예시

사용환경 : window10, node-v: 16.14.0, npm-v: 8.2.0, Vue.js(React.js, Angular) 

Vue.js의 프로젝트를 vue-cli를 통해서 설치하려는데 node-sass 관련하여 자꾸 오류가 났다.

node-sass 버전과 node 가 지원하는 버전간의 오류라고 한 블로그에서 확인하였지만, 버전은 잘 맞췄었다.

해결방법을 찾고 또 찾아 여러 가지 방법을 시도해보았다.

1. npm cache 정리
2. npm verify
3. node uninstall & install 
...

그리고 마지막에 와서야 dart-sass로 설치하였다. (이래도 되냐...ㅠ)

그런데 npm에서 node-sass를 검색하던 와중에 대문짝만하게 아래와 같은 내용이 작성되어져 있었는데, 간략하게 줄여보자면, 
" LibSass 및 Node Sass는 유지 보수는 무한적으로 유지할 것이지만 더 이상 사용되지 않습니다. 새로운 CSS나 Sass 기능에 추가 기능이나 호환성을 추가할 계획도 없다. 여전히 그것을 사용하는 프로젝트는 dart-sass로 옮겨야 한다." 라는 것이었다.

왜지..? 오늘에서야 이 글을 보긴하지만..

그리고 이제 다시 프로젝트를 설치해보았다.

성공하였는데 너무 찜찜하다.

에러 문구

npm ERR! code 1
npm ERR! path D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js npm ERR! Building: C:\Program Files\nodejs\node.exe D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library= npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli 'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli 'D:\\Vueproject\\Vue\\ip-addr-tracker\\app\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.14.0 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed at getNotFoundError (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) npm ERR! gyp verb `which` failed python2 Error: not found: python2 npm ERR! gyp verb `which` failed at getNotFoundError (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) { npm ERR! gyp verb `which` failed code: 'ENOENT' npm ERR! gyp verb `which` failed } npm ERR! gyp verb check python checking for Python executable "python" in the PATH npm ERR! gyp verb `which` failed Error: not found: python npm ERR! gyp verb `which` failed at getNotFoundError (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) npm ERR! gyp verb `which` failed python Error: not found: python npm ERR! gyp verb `which` failed at getNotFoundError (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) { npm ERR! gyp verb `which` failed code: 'ENOENT' npm ERR! gyp verb `which` failed } npm ERR! gyp verb could not find "python". checking python launcher npm ERR! gyp verb could not find "python". guessing location npm ERR! gyp verb ensuring that file exists: C:\Python27\python.exe npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable. npm ERR! gyp ERR! stack at PythonFinder.failNoPython (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-gyp\lib\configure.js:484:19) npm ERR! gyp ERR! stack at PythonFinder. (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-gyp\lib\configure.js:509:16) npm ERR! gyp ERR! stack at callback (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\graceful-fs\polyfills.js:299:20) npm ERR! gyp ERR! stack at FSReqCallback.oncomplete (node:fs:198:21) npm ERR! gyp ERR! System Windows_NT 10.0.19044 npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "D:\\Vueproject\\Vue\\ip-addr-tracker\\app\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" npm ERR! gyp ERR! cwd D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-sass npm ERR! gyp ERR! node -v v16.14.0 npm ERR! gyp ERR! node-gyp -v v3.8.0 npm ERR! gyp ERR! not ok npm ERR! Build failed with error code: 1 npm ERR! A complete log of this run can be found in:

Vue-cli webpack4.0 version 에서 sass를 개별 설치하려고

$ npm i node-sass
$ npm i sass-loader

를 했는데 에러가 발생하였다.

node-sass는 정상적으로 설치가 완료되었지만, sass-loader를 설치하지 못했다.

그래서 개발자버전으로 다운로드 하려했지만 또 에러를 뱉어냈다.

$ npm i sass-loader -D

■ 해결방법

Vue-cli webpack 4.0의 버전은 그에 맞는 알맞은 버전의 sass를 다운로드 받아야한다고 명시되어져있다.

$ npm install -D sass-loader@10.0.5 node-sass

10.0 version을 다운받아도 무방하다.