反応アプリでCSSを読み込む方法は？

Question

create-react-appを使用して反応アプリを作成しましたが、CSS /スタイラスファイルを読み込む方法がわからないという点を除いてすべて正常に動作します。

create-react-appを使用して作成された私の以前の反応プロジェクトでは、私はwebpack.configを使用しましたが、今ではこのファイルを含める場所と使用方法がわかりません。

これは私のフォルダ構造です：

import path from 'path'; 
import webpack from 'webpack'; 

export default { 
    entry: [ 
    'webpack-hot-middleware/client?reload=true', 
    path.join(__dirname, '/client/index.js') 
    ], 
    output: { 
    filename: 'bundle.js', 
    path: '/', 
    publicPath: '/' 
    }, 
    plugins: [ 
    new webpack.NoEmitOnErrorsPlugin(), 
    new webpack.HotModuleReplacementPlugin() 
    ], 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     include: path.join(__dirname, 'client'), 
     loader: 'babel-loader', 
     }, 
     { 
     test: /\.styl$/, 
     use: [ 
      'style-loader', 
      'css-loader', 
      { 
      loader: 'stylus-loader', 
      }, 
     ], 
     }, 
     { 
     test: /\.css?$/, 
     use: [ 
      'style-loader', 
      { 
      loader: 'css-loader', 
      }, 
     ], 
     }, 
    ], 
    }, 
    resolve: { 
    extensions: [ '.js', '.styl' ] 
    } 
} 

私は追加情報を提供する必要がある場合は私に知らせてください：

. 
+--client 
| +--node_modules 
| +--public 
| +--src 
| +--package.json 
+--server 
| +--node_modules 
| +--src 
| +--.babelrc 
| +--package.json 

これが私の前のwebpack.config.dev.jsファイルです。アプローチの

Answer 1

SCSSとLessファイルをドキュメントのcreate-react-appプロジェクトに追加する方法に関する詳細情報があります。詳細についてはhereを確認できます。

以下に示すようなファイルをインポートするだけで、基本的なCSSスタイルを追加できます。

import '/css/main.css'; 

それともclassNames

const styles = { 
    header: { 
    fontSize: 18, 
    color: '#909090', 
    } 
}; 

export default class Header extends React.Component { 
    render() { 
    return (
     <h1 className={styles.header}>This is a header</h1> 
    ); 
    } 
} 

として追加することができます

Answer 2

一つは、あなたはまた、例えば使用して、出力CSSを生成することができText.jsx

import React from 'react'; 
import './screen.css'; // if screen.css is located next to Text.jsx 

class Text extends React.Component { 
    // ... 
} 

export default Text; 

のために、あなたのJSファイルからロードするCSSファイル（CSS-ローダー経由）を必要としますExtractTextPlugin（Webpack2 loading and extracting LESS fileを参照）