Như Nguyễn Như Nguyễn - 4 months ago 16
HTML Question

How can I import component-specific css styles in React?

This is the structure that I'm trying to mimic (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 the style to that specific component.

But when I try to mimic this structure in my project it's not working. The imported
styles
object is always empty. I suspect I might be lacking some dependency but I can't figure out what it might be.

I would like to know which dependency I might be lacking and/or webpack configuration I need to do in order to apply the same structure to my project.

Answer

You may config your webpack like this

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