CODEWITHSUNDEEP
javascripthtmlcssreactjswebpack-dev-server
Như Nguyễn
Như Nguyễn

Reputation: 43

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.

Upvotes: 4

Views: 1730

Answers (2)

user3774574
user3774574

Reputation:

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 :)

Upvotes: 0

Kawatare267
Kawatare267

Reputation: 4376

You may config your webpack like this

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

Upvotes: 2

Related Questions