Question

似乎是一个显而易见的问题，但我在谷歌搜索时找不到好的答案。当我在 Next.js 中使用 scss 并导入组件级 scss 文件时，有没有办法用普通的 css 约定编写类的名称，然后在导入后使用 JS 约定？例如：

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

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

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

编辑：我想这样做而不是在我的 scss 文件中写入 loginButton，因为我正在将我的 React 项目重写为 Next.js，并且我的所有样式文件都使用“login-button”约定。

Answer 1

推荐的约定是使用驼峰命名法来命名你的 css/scss 类名。但是，如果您仍然想为 className 使用 kebab-case，则将它与括号表示法一起使用。

/* component.module.scss */

.login-button {
  /* some scss styling */
}

// component.jsx

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

请关注此 link 以从文档中了解更多信息。

使用 Next.js 的 scss 类名约定

1 个答案: