Như Nguyễn Như Nguyễn - 1 year ago 155
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):


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}>
<p>This project is licensed under the MIT license.</p>
<p>Made with love by <A href="https://twitter.com/mxstbr">Max Stoiber</A>.</p>

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
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 Source

You may config your webpack like this

. . .
  test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
. . .
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download