Не могу импортировать стили с помощью css-модулей, webpack и react

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


webpack reactjs javascript css-modules webpack-style-loader
person jbrown    schedule 14.01.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Наконец-то получилось. Это неправильный синтаксис:

<div className={["col-md-2", "col-lg-1", styles.startTimes]}>

Вы используете classNames и вместо этого делаете:

<div className={cx("col-md-2", "col-lg-1", styles.startTimes)}>

Вам также нужно использовать только имена классов в вашем CSS. Если вы стилизуете имена тегов напрямую (h1 и т. д.), они не применяются локально.

person jbrown    schedule 14.01.2016