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';

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

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.