Невозможно импортировать стили, используя css-модули, веб-пакет и реагировать

Question

Я разрабатываю свое приложение реакции. Я использую 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и т. д.) они не применяются локально.