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

Question

Я настраиваю свое приложение для реагирования. Я использую css-модули с webpack. Вот моя конфигурация:

{ 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 и т. Д.), Они не применяются локально.