[解決済み] reactjsアプリでbootstrapのcssとjsをインクルードする方法は?
2022-04-19 04:12:37
質問
私はreactjsの初心者です、私は私の反応アプリケーションにbootstrapを含めたい
ブートストラップをインストールするには
npm install bootstrap --save
さて、私の反応アプリでブートストラップのCSSとJSをロードしたいと思います。
webpackを使用しています。
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;
私の問題は、"how to include bootstrap css and js in reactjs app from node_modules?" How to setup for bootstrap to include in my react app?です。
解決するには?
Reactを初めて使う方で
create-react-app
cli のセットアップを実行します。
npm
コマンドを実行し、最新版の bootstrap をインクルードします。
npm install --save bootstrap
または
npm install --save bootstrap@latest
次に、以下のimport文を
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
).
関連
-
[解決済み] Bootstrap 4のColでコンテンツを下に揃える方法
-
[解決済み] SCSSファイルエラー。インポートするファイルが見つからないか読めません: bootstrap
-
[解決済み] Bootstrap 4-alphaでメディアブレークポイントを使用する
-
[解決済み] BootstrapでNavbarが折りたたまれない
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] twitterのbootstrapで五等分の列を作る
-
[解決済み】TwitterのBootstrapを使ってインラインでリストを表示する方法
-
[解決済み] reactjsアプリでbootstrapのcssとjsをインクルードする方法は?
-
[解決済み] Bootstrap 3 のスタックドタブ
-
[解決済み] Bootstrap: コンテナの幅を変更するには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrapのモーダルが表示されない
-
[解決済み] Bootstrap v4におけるvisible-**とhidden-**の欠落について
-
[解決済み】これらの属性は何ですか。アリア・ラベリングビー`とアリア・ヒドゥン`です。
-
[解決済み] BootstrapはCDNから使うべきか、それとも自分のサーバーにコピーを作るべきか?
-
[解決済み] Twitter ブートストラップ スクロール可能なテーブル
-
[解決済み] BootstrapとjQuery Validationプラグイン
-
[解決済み] Bootstrap 3 のスタックドタブ
-
[解決済み] Twitter Bootstrapのテーブルの幅が常に100%なのはなぜですか?
-
[解決済み] Twitter Bootstrapのモーダルでエスケープキーを使って閉じる機能を有効にするにはどうしたらいいですか?
-
[解決済み] 行を組み合わせたブートストラップ(rowspan)