不能使用css-modules，webpack和react导入样式

Question

我正在设计我的react应用程序。我正在和webpack一起使用css-modules。这是我的配置：

{ 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等)，这些样式不会在本地应用。