反應：面臨在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模塊加載。