javascript - 检测 CSS Modules/React 中不存在的类名的使用

Question

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

 // 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>

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

标签： javascriptreactjscss-modules

Answer 1

如果您愿意接受 typescript 解决方案，我为您找到了一个 TS 插件。

打字稿插件CSS模块

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

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