Sass 모듈 활용

Sass 스타일 모듈 ▸ JS 파일에서 불러오기

CSS 모듈 활용 방법과 Sass 모듈 활용 방법은 동일합니다.

Button.module.scss

.error {
  background-color: get-color(error);
}

Notification.module.scss

.error {
  color: rgba(#ff4885, 90%);
  background: get-color(black);
}

Button 컴포넌트에서 Button.module.css 파일을 불러온 후 스타일 모듈(JavaScript object)의 클래스 이름 멤버를 사용해 React 요소의 클래스 이름으로 설정합니다.

Button.js

import { error } from './Button.module.scss';


export default function Button(props) {
  return <button type="button" className={error} {...props} />
}