React：jsxでCSSスタイルを使用する問題が発生する

Question

Reactプロジェクトで外部CSSを使用しようとしています。私はバベルでwebpackを使用しています。私は私のプロジェクトにcss、js、jsxローダーを設定しました。実際、私のプロジェクトは正常にコンパイルできましたが、私は自分のhtmlにスタイルを適用することができませんでした。

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

：ここ

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

私は、configファイルのWebPACKここ

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; 

CSSスタイルを使用したい私のJSXファイルである：ここで

は私のスタイルheader.cssファイルです

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のモジュールローダを使用せずにスタイルを使用することができたのApp反応します。