カスタムCSSをreactjsプロジェクトにインポートする方法

Question

私は本当に自分の反応プロジェクトにカスタムbootstrap.min.cssを取得するのに苦労しています。これを行う方法は誰にも分かりません。私はちょうど盲目だし、それを参照してくださいカント

おかげ

編集：アイブ私はunsu午前私のindex.htmlの頭の中で試してみました、それは私のWebPACK

厥

var debug = process.env.NODE_ENV !== "production"; 
var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    context: path.join(__dirname, "src"), 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: "./js/client.js", 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'], 
      plugins: ['react-html-attrs', 'transform-class-properties', 
        'transform-decorators-legacy'], 
     } 
     } 
    ] 
    }, 
    output: { 
    path: __dirname + "/src/", 
    filename: "client.min.js" 
    }, 
    plugins: debug ? [] : [ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false 
      }), 
    ], 
}; 

仕事doesntの誰もが素晴らしいことだものを提案することができれば最高のCSSローダーが何であるかの再

が、これは基本的にどこ2

<div className="container" style={backImg}> 
       <div className="row" style={slidePadding}> 
        <div className="col-md-12 well well-lg"> 
         <div className="row"> 
          <div className="col-md-12"> 
           <h4>Thinking load from £200 to £3,000? Thinking of repaying from 6 - 24 months? </h4><br /> 
           <Horizontal /> 
          </div> 
         </div> 
         <div className="row"> 
          <div className="col-md-12"> 
           <p>&nbsp;</p> 
          </div> 
         </div> 
         <div className="row"> 
          <div className="col-md-12"> 
           <p>Representative Example. Borrow £1,250 - 15 monthly repayments of £166.66. Total cost of credit £1,249.90 which is £1,249.90 interest at 122.96% pa fixed. Total amount repayable £2,499.90. Representative 233.6% APR.</p> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

これはあなたが

に着陸サイトの主なセクションである編集私はCSSが動作するようにしたいすべての幅とすべてを変更できるようにしたいので、インラインスタイルで行うのは恐ろしいのでCSSファイルは唯一の方法です

Answer 1

は私が行うために必要なものを自分自身をそれを働いた私のindex.htmlにあった

<link href="./js/styles/bootstrap.min.css" rel="stylesheet"> 

を追加した後、webpack.config.jsで、その後

npm install --save-dev ignore-loader 

をインストール

を追加

loader: 'babel-loader', 'ignore-loader', 

無視ローダー部分とそれはバベルにトランスクリールしないように伝えます。ファイル

Answer 2

ファイルパスをインポートする必要がありますコンポーネント（JS）ファイルです。例：

import a from "../styles/bootstap.min.css"; 

Answer 3

あなたのアプリのルートにあるcssファイルをインポートするだけです。 あなたのアプリのルートは何ですか、ちょうどそこにファイルをインポートします。 like： import '../pathToTheFile'; thats it。