无法使用css-modules，webpack导入样式并作出反应

Question

我正在设计我的反应应用程序。我正在使用webpack的css模块。这是我的配置：

{ test: /\.css$/, loaders: ["style", "css?modules"] }, 

我对我的组件进行了样式设计，制作了一杯咖啡，现在它不工作。所以我有一个我想使用的样式表。

import styles from "./search.css"; 

但是，当我在我的组件内打破，没有定义styles：我与导入它。我的风格现在没有被应用。下面是我如何使用它的一个例子：

// the chrome inspector only shows the first two styles, the last is not there 
<div className={["col-md-2", "col-lg-1", styles.startTimes]}> 

为什么会styles是空的？

Answer 1

终于搞定了。这是不正确的语法：

<div className={["col-md-2", "col-lg-1", styles.startTimes]}> 

您必须使用classNames，而是做：

<div className={cx("col-md-2", "col-lg-1", styles.startTimes)}> 

你还需要在你的CSS只使用类名。如果直接对标签名称进行样式设置（h1等），则不会在本地应用这些名称。