[SCSS] 전역 적용 대신 한 파일에서만 사용(module)/중복 클래스 피하기

SCSS를 사용 중, 컴포넌트내에서 파일을 import해도 컴포넌트를 또 다른 파일로 import 하면 결국 파일이 한 데 모인다.

클래스명이 동일할 시, 결국 같은 SCSS의 style이 적용되어 원치 않았지만 같은 스타일이 적용되고

큰 프로젝트 진행시에는 더 큰 문제가 생길 수 있다.

따라서 SCSS를 한 파일 내에서 해당 클래스에만 적용하고자 할 경우에는 module을 사용한다.

 

1. 파일명을 .module.scss로 변경한다.

2. 다음과 같은 방식으로 import 한다. (import styles from '파일명' )

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

 

3. 클래스명을 사용시 {styles.클래스명}으로 사용한다.

 <footer className={styles.footerWrap}>

 

+ 하이픈 -이 들어간 className은 위와 같은 방식으로는 인식이 안되기에 아래와 같이 사용한다.

<p className={styles['date-picker']}></p>

 

*위와 같이 사용해도 되지만 일일히 styles해서 사용하기엔 번거로움

=> classnames 라이브러리를 활용하면 편함

 

* classnames 설치

npm install classnames

 

classNames의 bind기능 사용(style사용때마다 styles.를 붙여주는 것 생략가능) 

-다양한 사용예제 참고사이트

 

이런식으로 바로 사용할 수 있다.

  <p className={cx('date-picker')}></p>

 

아래와 같이 객체,배열 방식으로도 사용가능하여 여러개의 css클래스 사용이나 조건부 스타일링 등에 유용하다.

// ${styles.one} ${active ? styles.two : ''} 이렇게 사용하는 것 대신

import classNames from 'classnames/bind';
const cx = classNames.bind(styles);

cx('one', 'two')

cx('my-component', {
 active: true
}) //my-component는 기본 클래스명으로 적용, 
//active 클래스명은 true면 추가됨(true>state로 넣으면 true of false 돼서 유용)

cx('my-component', ['another', 'classnames'])

---

 

위에만 하려고 할 경우에는 TypeScript의 경우 module을 찾을 수 없다고 에러가 나올 것이다.

다음과 같이 설정해준다.

1. global.d.ts 파일 생성

2. 안에 다음과 같이 코드 작성

declare module '*.scss' {
  const content: { [className: string]: string };
  export = content;
}

 

이렇게 해주어도 되고 나는 폴더를 정리하고자 다음과 같이 진행했다.

1. src>modules>global>global.d.ts 파일 생성 후 위와 같이 코드 작성

2.tsconfig.json에서 compilerOptions내에 아래 추가

"typeRoots": ["./node_modules/@types", "./src/modules/global"]

 

그럼 이제, 해당 클래스에만 SCSS가 적용이 된다.

 

+ 만약 다른 파일에서 동일하게 쓰이는 클래스명과 해당 SCSS파일의 styles.클래스명을 동시에 적용하려면?

 className={`noticeInputNonBorder ${styles.searchInput}`}

 

React에서 TypeScript를 적용 후 "module.scss" import 했을 때 에러

 

 

2. CSS Module · GitBook

 

SCSS & CSS Module

 

리액트 컴포넌트 스타일링 – CSS Module / Sass / styled-components | VELOPERT.LOG

 

CSS Module