React/Redux開発の過程で、ブートストラップをインストールする適切な方法は何ですか？

Question

npm install --save bootstrapを実行できましたが、node_modulesにあります。

1つの方法は、zipファイルをダウンロードしてそれから必要なファイルを取得することですが、npm/webpackの標準的な方法を使用しているとは思われません。だからそれを行う標準的な方法は何ですか？

Answer 1

あなたがで

まずインストール反応するブートストラップを設定するには、いくつかの依存関係をインストールする必要があり、次のloadersと

npm install react react-dom bootstrap babel-preset-react --save 

npm install webpack css-loader style-loader file-loader url-loader babel-core babel-loader babel-preset-es2015 --save-dev 

今すぐあなたのWebPACKには、これらのローダーを設定する必要がdependencies

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    entry: './main.js', 
    output: { path: __dirname, filename: 'bundle.js' }, 
    module: { 
    loaders: [ 
     { 
     test: /.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     }, 
     { 
     test: /\.css$/, 
     loader: "style-loader!css-loader" 
     }, 
     { 
     test: /\.png$/, 
     loader: "url-loader?limit=100000" 
     }, 
     { 
     test: /\.jpg$/, 
     loader: "file-loader" 
     }, 
     { 
     test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=application/font-woff' 
     }, 
     { 
     test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=application/octet-stream' 
     }, 
     { 
     test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'file' 
     }, 
     { 
     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=image/svg+xml' 
     } 
    ] 
    }, 
}; 

その後、エントリファイルにBootstrapのcssをインポートする必要があります。例：index.js

import 'bootstrap/dist/css/bootstrap.css';