Create-react-app: import styles from './myfile.css' returns empty styles object

[bw2]

I must be making some basic mistake, but I can't get style imports to work.

The contents of myfile.css are

.someclass {
  background-color: blue;
}

then I have a .jsx file with

import styles from './myfile.css'
console.log(styles)
console.log(styles.someclass)
...
<div className={styles.someclass} />

when I open this, it logs

Object {}
undefined

and if I inspect the <div>, it doesn't have a class attribute.

[suhaotian]

it's not css-module

[shrynx]

What you are trying is css-modules and as of now create-react-app doesn't support it.

The alternate is doing old school

/* myfile.css */
.someclass {
  background-color: blue;
}

// myComponents.js
import './myfile.css'

...


md5-1e862d5e9cc0b2343dacb4e71a594a92

[bw2]

That's working. Thanks!

[futurfrukt]

@bw2 seems like you didn't enable an option { modules: true } for css-loader in webpack config

take a look

• https://github.com/webpack-contrib/sass-loader/issues/206
• https://github.com/webpack-contrib/css-loader#options