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

Question

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.

you are trying to import styles from './styles.css' but you need import from style.css — Serhii Baraniuk
– Serhii Baraniuk, Commented Jul 21, 2016 at 9:33
Verify the import path and ensure that you have a configured a CSS loader in your webpack config — Oluwafemi Sule
– Oluwafemi Sule, Commented Jul 21, 2016 at 9:39
That pattern is from CSS Modules, see here for more info: github.com/css-modules/css-modules — Toby
– Toby, Commented Jul 21, 2016 at 11:04

Kawatare267 · Accepted Answer · 2016-07-21 09:54:04Z

2

You may config your webpack like this

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

answered Jul 21, 2016 at 9:54

Kawatare267

4,3963 gold badges18 silver badges16 bronze badges

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

Comments

user3774574 · Accepted Answer · 2016-07-22 14:37:08Z

0

Quite not sure about it, but it seems you are looking for styles.css with javascript import styles from './styles.css'; and you have a style.cssin your directory :)

answered Jul 22, 2016 at 14:37

user3774574

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related