关于 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
}
}

添加样式加载器来处理css。

因为你没有提供webpack版本，所以我无法提供任何代码，但我相信你会弄清楚如何使用它。

https://github.com/webpack-contrib/style-loader

好吧，我能够按照使用 style-loader 的答案所建议的那样解决这个问题，并且我对我的 webpack 配置文件进行了一些更改，如下所示：

1
2
3
4
5
6
7
8
9
10

test: ///.css$/,
exclude: /node_modules/,
use: [
{ loader:"style-loader" },
{ loader:"css-loader" ,
query: {
modules: true,
localIdentName: ‘[name]__[local]___[hash:base64:5]’
}}
]

但我想知道当我使用 Create React App 设置反应环境时，我能够在不使用 css 模块加载器的情况下使用样式。

你应该为你的 webpack 配置添加”style-loader”。您可以在数组中提供它，如下所示。另外，我在这个 repo 中有一个例子：

https://github.com/burakhanalkan/simple-react-materialui-app-starter/blob/master/webpack.config.js

1
2
3
4
5
6
7

{
test: ///.css$/,
use: [
"style-loader",
"css-loader"
]
},

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269246.html

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

React: facing issues using css styles in jsx

相关推荐

发表回复