9.3.2 Sass와 함께 사용하기

Sass를 사용할 때도 파일 이름 뒤에 .module.scss 확장자를 사용해 주면 CSS Module로 사용할 수 있습니다. CSSModule.module.css 파일의 이름을 CSSModule.module.scss로 한번 변경해 보세요. 스타일 코드도 이에 따라 조금 수정해 보겠습니다.

CSSModule.module.scss

/* 자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 마음대로 사용 가능 */
 
.wrapper {
  background: black;
  padding: 1rem;
  color: white;
  font-size: 2rem;
  &.inverted {
    // inverted가 .wrapper와 함께 사용되었을 때만 적용
    color: black;
    background: white;
    border: 1px solid black;
  }
}
 
/* 글로벌 CSS를 작성하고 싶다면 */
:global {
  // :global {}로 감싸기
  .something {
    font-weight: 800;
    color: aqua;
  }
  // 여기에 다른 클래스를 만들 수도 있겠죠?
}

---

 

그러고 나서 CSSModule.js 상단에서도 .css 파일 대신 .scss 파일을 불러오세요.

import styles from './CSSModule.module.scss';

이전과 똑같은 화면이 나타났나요?