Project Tours/Tour on Plantopia

[오늘의 이슈] .scss와 module.scss의 차이를 이제 알았어요.

Kestrel 2023. 8. 19. 18:24

사실 난 module 글자만 보면 자신감이 사라졌었는데 이제 첫 번째로 맞이하게 되었다. 

문제가 되었던 라인인데 className을 .header로 쓰다보니 중첩이 되는 부분이 생긴다는 것이다. 사실 이런 문제에 대해 깊게 고민해보지 않은터라 보고 '생각해보니 그렇네'했던 나였다. 그래서 module.scss로 써서 이런 문제를 해결할 수 있다. 이런 것이 모듈화의 기본적인 목적이라고 볼 수 있다.  아래는 gpt가 알려준 모듈의 이점이다.

 

 

여기서 문제는 우리가 vite을 사용하고 있어 여기서도 호환이 되나 문제였다. 딱히 글이 나오지않았는데  스택오버플로우에서 composes 처리가 안된다는 글을 보았고(근데 댓이 없었다.) 이 것 이외의 이슈는 찾기 힘들었다. 

https://stackoverflow.com/questions/75243712/vite-sass-css-modules-composes-prop-limitation

 

Vite + Sass + CSS Modules: `composes` prop limitation

I'm migrating my project from create-react-app to Vite. Among my styles there is a following fragment: // Button.module.scss .btn { border-radius: 8px; border-style: solid; padding: 8px; cu...

stackoverflow.com

그리고 난 composes 기능을 몰랐었다.

 

https://www.youtube.com/watch?v=lCD02rhFb1A&ab_channel=ovchinnikovdev