How to import component specific CSS styles in React?

Question

This is the structure I'm trying to imitate (from react-boilerplate ):

component
  |Footer
    |style.css
    |Footer.js

Inside Footer.js, the styles are imported quite elegantly this way:

import React from 'react';
import A from 'components/A';

import styles from './styles.css';

function Footer() {
  return (
    <footer className={styles.footer}>
      <section>
        <p>This project is licensed under the MIT license.</p>
      </section>
      <section>
        <p>Made with love by <A href="https://twitter.com/mxstbr">Max Stoiber</A>.</p>
      </section>
    </footer>
  );
}

export default Footer;

className (s) are then generated for the footer element to apply style to this particular component.

But when I try to imitate this structure in my project, it does not work. The imported object is stylesalways empty. I suspect that I may have some kind of addiction, but I cannot understand what it may be.

I would like to know what kind of dependency I may have and / or the webpack configuration that I need to do in order to apply the same structure to my project.

Answer 1

-

. . .
{
  test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
}
. . .

Answer 2

, , , styles.css javascript import styles from './styles.css'; style.css :)