Class 使用 Next.js 的 scss 名称约定

Question

Seems like an obvious question but I couldn't find good answers when googled it. When I use scss with Next.js and import component-level scss file, is there a way of writing the name of the class with the normal css convention and then after import it to use JS convention? For example:

 // login.module.scss file: .login-button { // some scss styling } // Login.js file: import styles from './login.module.scss' <button className={styles.loginButton}>Login</button>

Edit: I wanna do that instead of writing loginButton in my scss file because I'm rewriting my react project to Next.js and all my styling files uses 'login-button' convention.

Answer 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 */
}

// component.jsx

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

Please follow this link to know more from the documentation.