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

Question

似乎是一个明显的问题，但我在谷歌搜索时无法\xe2\x80\x99找到好的答案。\n当我将 scss 与 Next.js 一起使用并导入组件级 scss 文件时，有没有一种方法可以用正常的 css 约定，然后导入后使用 JS 约定？\n例如：

\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n

编辑：\n我想这样做，而不是在我的 scss 文件中编写 loginButton 因为我 \xe2\x80\x99m 将我的 React 项目重写为 Next.js 并且我的所有样式文件都使用 \xe2\x80\x99login-button\xe2\x80\ x99 约定。

\n

Answer 1

推荐的约定是使用驼峰命名法来命名 css/scss 类名。但如果您仍然想使用短横线命名法作为您的类名，那么将它与括号表示法一起使用。

/* component.module.scss */

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

// component.jsx

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

请点击此链接从文档中了解更多信息。