无法使用 css-modules、webpack 和 react 导入样式

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