使用 Next js 时在 CSS/SASS 模块中使用 kebab-case CSS 类名答案

【问题标题】：Using kebab-case CSS classnames in CSS/SASS modules when using Next js使用 Next js 时在 CSS/SASS 模块中使用 kebab-case CSS 类名
【发布时间】：2020-08-30 20:13:13
【问题描述】：

我在 React/Next.js 中为我的组件使用 SCSS 模块，但我不知道如何导入 kebab-case 类。

目前，我只是在 camelCase 中编写所有 SCSS 类，但这并不理想，因为这意味着我无法使用 SCSS 级联。

（我还在学习 React，我自己制作动态组件不是很擅长，所以我现在坚持使用 React Strap。）

其实我想写

.公司标志

代替：

.companyLogo

编辑：className={styles['company-logo']} 导致意外令牌错误

这是我的组件：

import styles from './styles/Navbar.module.scss'

const NavComponent = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <div>
          <img src="../ss-logo.png" alt="Logo" className={styles.companyLogo}/>
    </div>
  );
}

export default NavComponent;

还有我的 SCSS：

.companyLogo {
    height: 3rem;
}

【问题讨论】：

标签： javascript css reactjs sass next.js

【解决方案1】：

<img src="../ss-logo.png" alt="Logo" className={`${style['company-logo']}`}/>

【讨论】：

【解决方案2】：

您可以使用对象键[] 语法。

<img src="..." className={styles['company-logo']}`

【讨论】：

不，我试过了。它会导致“意外的令牌错误”：/

【解决方案3】：

className={styles['company-logo']}

应该是你想要的。

【讨论】：

不，我试过了。它会导致“意外的令牌错误”：/