[CSS/SCSS] module

CSS/SCSS 코드 작성 시 class의 중첩을 막기 위해 사용하는 기능

사용

1. 스타일 파일 확장자 앞에 module.을 추가하여 작성한다.

   // style.module.scss
   
   .section {
       ...
   }
   
   .title {
       ...
   }

2. 객체명을 정하여 import하고, 사용 시 {객체명.클래스명}의 형태로 사용한다.

   import styles from "./style.module.scss";
   
   export default function APP() {
   
     return (
       <div className={styles.section}>
         <div className={styles.title}>
           title
         </div>
         <input type="button" className="btn" value="로그인" />
         <input type="button" className="btn" value="회원가입" />
       </div>
     );
   }

환경

css-loader 환경에서 지원하나, CRA로 만든 프로젝트에는 이미 적용되어있으므로 별도의 라이브러리/패키지가 필요하지는 않다.

📌 참조

• https://react.vlpt.us/styling/02-css-module.html