检测 CSS 模块/React 中不存在的类名的使用

Question

在我的反应项目中，如果我使用 css 模块文件中一些不存在的 className，

 // mycss.modules.scss

.thing { color: red }

// index.jsx

import styles from mycss.modules.scss

<div className={styles.otherThing}>Some div</div>

// Browser would return:

<div>Some div</div>

它悄悄地失败了，没有让我知道这个类不存在。我如何检查这个类名是否存在并抛出错误。如果在构建期间保存文件时收到错误，那就太好了。

Answer 1

如果您对 Typescript 解决方案持开放态度，我为您找到了一个 TS 插件。

打字稿插件 css 模块

它可以使用styles可用键的类型信息填充对象。

您不必将整个项目切换为 typescript，您可以// @ts-check在此文件顶部添加指令以启用 TS 引擎设计时检查。