Question

我使用create-react-app创建一个非常简单的应用程序。但是css并不适合我。这是我的代码

# 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;

我的h1的颜色仍然是黑色而不是白色。任何帮助将不胜感激！

Answer 1

# 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]'
  }
}

反应css没有正确加载

1 个答案: