反应：面临在jsx中使用CSS样式的问题

Question

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

这是我的风格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 
    } 
} 

Answer 1

添加用于处理css的样式加载器。

由于您没有提供webpack版本，我无法提供任何代码，但我相信您会弄清楚如何使用它。

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

Answer 2

你应该为你的WebPack配置中添加 “风格装载机”。您可以按如下方式在数组中提供它。另外，我有这个回购的例子：

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

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

Answer 3

嗯，我能解决这个问题，提出答案使用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模块加载。