0

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!

3
  • Please see my answer - stackoverflow.com/questions/45467036/… Commented Nov 30, 2017 at 7:15
  • Can you paste your webpack config as well ? Especially the module part 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? Commented Nov 30, 2017 at 7:43

1 Answer 1

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]'
  }
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.