无法使用CSS模块，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等），则这些名称不会在本地应用。