reactjsアプリにbootstrap cssとjsを含めるにはどうすればいいですか? 質問する

reactjsアプリにbootstrap cssとjsを含めるにはどうすればいいですか? 質問する

私はReactJSの初心者ですが、ReactアプリにBootstrapを組み込みたいです

私はbootstrapをインストールしましたnpm install bootstrap --save

ここで、React アプリに Bootstrap CSS と JS をロードしたいと思います。

私はwebpackを使用しています。

config.js は、

var config = {
    entry: './src/index',

    output: {
        path: './',
        filename: 'index.js'
    },

    devServer: {
        inline: true,
        port: 8080,
        historyApiFallback: true,
        contentBase:'./src'
    },

    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel',

                query: {
                    presets: ['es2015', 'react']
               }
            }
        ]
    }
};

module. exports = config;

私の問題は、「ノード モジュールから ReactJS アプリにブートストラップ CSS と JS を含めるにはどうすればよいか」ということです。React アプリにブートストラップを含めるように設定するにはどうすればよいですか?

ベストアンサー1

React を初めて使用し、create-react-appcli セットアップを使用する場合は、以下のnpmコマンドを実行して最新バージョンの bootstrap を含めます。

npm install --save bootstrap

または

npm install --save bootstrap@latest

次に、次のインポート ステートメントをindex.jsファイルに追加します。( https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css )

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

または

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

ターゲット要素では 属性としてを使用することを忘れないでくださいclassName(React はclassNameの代わりに 属性として を使用しますclass)。

おすすめ記事