关于 javascript:React: 在 jsx 中使用 css 样式面临的问题

React: facing issues using css styles in jsx

我一直在尝试在我的 React 项目中使用外部 CSS。我正在使用带有 babel 的 webpack。我已经在我的项目中配置了 css、js 和 jsx 加载器。事实上，我的项目能够成功编译，但我无法在我的 html 上应用样式。

这是我的 style-header.css 文件：

1
2
3
4

.LogoMargin {
margin-top: 10px;
margin-left: 10px;
}

这是我想在其中使用 css 样式的 jsx 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import React,{Component} from 'react';
import { withStyles } from 'material-ui/styles';
import TextField from 'material-ui/TextField';
import logo from '../resources/images/logo.png';
import '../resources/style/style-header.css';

class Header extends Component {
render () {
return(

<span>
<img className="LogoMargin" src={logo} height="60" width="200" alt="logo" />
</span>
<TextField
id="search"
label="Search"
type="search"
/>

)
}
}

export default Header;

这里是 webpack 配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
devtool: 'eval-source-map',
entry: __dirname +"/app/index.js",
output: {
path: __dirname +"/build",
filename:"bundle.js"
},

module: {
loaders: [
{
test: /\\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\\.css$/,
exclude: /node_modules/,
loader: 'css-loader'
},
{
test: /\\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
},
},
]
}
]
},

plugins: [
new HtmlWebpackPlugin({
template: __dirname +"/index.tmpl.html"
}),
new webpack.HotModuleReplacementPlugin()
],

devServer: {
historyApiFallback: true,
inline: true,
stats: {colors: true},
hot: true
}
}