Can't import styles using css-modules, webpack and react

Question

I'm styling my react app. I'm using css-modules with webpack. Here's my config:

{ test: /\.css$/, loaders: ["style", "css?modules"] },

I styled my component, made a coffee and now it's not working. So I've got a stylesheet I want to use. I'm importing it with:

import styles from "./search.css";

But, when I break inside my component, styles is not defined. None of my styles are now being applied. Here's an example of how I'm using it:

// the chrome inspector only shows the first two styles, the last is not there
<div className={["col-md-2", "col-lg-1", styles.startTimes]}>

Why would styles be empty?

jbrown · Accepted Answer · 2016-01-14 20:14:00Z

2

Finally worked it out. This is not the right syntax:

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

You have you use classNames and instead do:

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

You also need to only use class names in your CSS. If you style tag names directly (h1, etc) these are not applied locally.

answered Jan 14, 2016 at 20:14

jbrown

8,05319 gold badges79 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1