Next.js를 사용하는 scss의 클래스 이름 규칙 (Class names convention for scss using Next.js)

문제 설명

Next.js를 사용하는 scss의 클래스 이름 규칙 (Class names convention for scss using Next.js)

뻔한 질문처럼 보이지만 구글링을 해보니 좋은 답을 찾을 수 없었습니다. Next.js와 함께 scss를 사용하고 component‑level scss 파일을 가져올 때 일반 css 규칙으로 클래스 이름을 작성한 다음 JS 규칙을 사용하도록 import한 후 가져오는 방법이 있습니까? 예:

// login.module.scss file:
.login‑button {
  // some scss styling
}

// Login.js file:
import styles from './login.module.scss'

<button className={styles.loginButton}>Login</button>

편집: 내 반응 프로젝트를 Next.js 및 모든 것에 다시 작성하기 때문에 scss 파일에 loginButton을 쓰는 대신 그렇게 하고 싶습니다. 내 스타일 파일은 '로그인 버튼' 규칙을 사용합니다.

참조 솔루션

방법 1:

The recommended convention is to use camelCase to name your css/scss classNames. But if you still want to use kebab‑case for your className, then use it with the bracket notation.

/ component.module.scss /

.login‑button {

  / some scss styling /

}

</code></pre>
// component.jsx

<button className={styles['login‑button']}>Login</button>

</code></pre>
Please follow this link to know more from the documentation.
(by Tamir Hen、bonnopc)
참조 문서


Class names convention for scss using Next.js (CC BY‑SA 2.5/3.0/4.0)