反应:面临在jsx中使用CSS样式的问题
问题描述:
我一直在尝试在我的React项目中使用外部CSS。我用babel使用webpack。我在我的项目中配置了css,js和jsx加载程序。事实上,我的项目能够成功编译,但我无法将样式应用于我的html。反应:面临在jsx中使用CSS样式的问题
这是我的风格header.css文件:
.LogoMargin {
margin-top: 10px;
margin-left: 10px;
}
这里是我想用css样式
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(
<div>
<span>
<img className="LogoMargin" src={logo} height="60" width="200" alt="logo" />
</span>
<TextField
id="search"
label="Search"
type="search"
/>
</div>
)
}
}
export default Header;
这里的WebPack配置文件我的JSX文件:
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版本,我无法提供任何代码,但我相信您会弄清楚如何使用它。
答
你应该为你的WebPack配置中添加 “风格装载机”。您可以按如下方式在数组中提供它。另外,我有这个回购的例子:
https://github.com/burakhanalkan/simple-react-materialui-app-starter/blob/master/webpack.config.js
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},
答
嗯,我能解决这个问题,提出答案使用style-loader,也是我做了一些改变,以我的WebPack的配置文件,该文件是如下:
test: /\.css$/,
exclude: /node_modules/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" ,
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}}
]
但我不知道,当我设置使用创建反应环境中相互反应应用我能使用的样式,而无需使用CSS模块加载。
+0
CRA已经提供它的webpack配置。 – bluesixty
提供webpack配置 –
刚刚更新了文章 –