React css not loading properly

Question

I used create-react-app to create a very simple app. But the css is not working for me. Here's my code

# Test.css
.h1 {
    color: white;
}

# Test.jsx
import React, { Component } from 'react';
import styles from './Test.css';

class Test extends Component {
  render() {
    return (
      <div>
        <h1 className={styles.h1}>Test!</h1>
      </div>
    )
  }

}

export default Test;

The color of my h1 is still black not white. Any help will be appreciated!

Please see my answer - stackoverflow.com/questions/45467036/… — Umesh
– Umesh, Commented Nov 30, 2017 at 7:15
Can you paste your webpack config as well ? Especially the module part — klugjo
– klugjo, Commented Nov 30, 2017 at 7:40
I don't have a webpack config.. Still new to react. When I create-react-app it didn't give me one. So is one webpack config required to make it work? — Suanmeiguo
– Suanmeiguo, Commented Nov 30, 2017 at 7:43

MD.ALIMUL Alrazy · Accepted Answer · 2017-11-30 08:55:46Z

0

# Test.css
.h1 {
    color: white;
}

# Test.jsx
import React, { Component } from 'react';
import styles from './Test.css';

class Test extends Component {
  render() {
    return (
      <div>
        <h1 className={styles.h1}>Test!</h1>
      </div>
    )
  }

}

export default Test;

In the project that I’m adding CSS Modules to we already have one loader defined for our JavaScript:

module: {
  loaders: [{
    test: /\.js$/,
    loaders: ['react-hot', 'babel'],
    include: path.join(__dirname, 'src')
  }`enter code here`
}
webpack config
{
  test: /\.css$/,
  loader: 'style-loader'
}, {
  test: /\.css$/,
  loader: 'css-loader',
  query: {
    modules: true,
    localIdentName: '[name]__[local]___[hash:base64:5]'
  }
}

answered Nov 30, 2017 at 8:55

MD.ALIMUL Alrazy

3401 gold badge7 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

React css not loading properly

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related