使用 Next.js 的 scss 的类名约定答案

【问题标题】：Class names convention for scss using Next.js使用 Next.js 的 scss 的类名约定
【发布时间】：2021-08-06 05:22:39
【问题描述】：

似乎是一个显而易见的问题，但我在谷歌上搜索时找不到好的答案。当我将 scss 与 Next.js 一起使用并导入组件级 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，并且我的所有样式文件都使用“登录按钮”约定。

【问题讨论】：

我认为您不必使用相同的名称为什么不在您的 scss 中使用 loginButton ？
我认为不可能。请查看 css 模块的文档。 github.com/css-modules/css-modules#naming

标签： javascript css reactjs sass next.js

【解决方案1】：

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

/* component.module.scss */

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

// component.jsx

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

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

【讨论】：