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

Question

bounty到期在5天内。该问题的答案有资格获得+ 50声望赏金。Edvards Niedre正在寻找规范答案。

在我的React项目中，如果我使用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

实际上，可以使用javascript代码。但是我认为className是否存在检查不是一个好主意。

document.styleSheets[].rules[].selectorText

原始链接How can you determine if a css class exists with Javascript?

Answer 2

将此功能添加到顶部：

// index.jsx
import styles from mycss.modules.scss

function strictStyles (clsName){
  if(styles[clsName]){
    return styles[clsName]
  }else{
    throw "CSS class doesn't exist";
  }
}

...
<div className={strictStyles(otherThing)}>Some div</div>
...

Answer 3

除非您要提出拉取请求以向webpack加载器本身添加诸如严格模式选项之类的内容，否则我认为您可以做很多事情，因为它只是基础对象。一个简单的替代方法是只执行styles.styleName.toString()，这样如果styleName未定义，则会抛出错误。