webpack 如何插入bootstrap.js来响应应用程序?

2lpgd968  于 2022-12-13  发布在  Webpack
关注(0)|答案(2)|浏览(138)

如何插入twitter-bootstrap js文件来使用webpack来响应应用程序?
我知道reactstrap和react-bootstrap等react库,但我想知道如何在没有这些库的情况下插入bootstrap.js文件。

zzwlnbp8

zzwlnbp81#

您可以通过npm/yarn安装Bootstrap和jQuery:

npm install bootstrap jquery

然后将Bootstrap导入顶级React文件(入口点):

import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/dist/jquery.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'

当然,您需要适当的Webpack规则来转换CSS。
在React中使用Bootstrap的问题是它需要jQuery,现在有两件事在干扰DOM,这是一个麻烦的处方。这是Reactstrap(用于Bootstrap 4)和React-Bootstrap(现在也支持Bootstrap 4)的真实的价值主张;它们消除了对jQuery的依赖,并将功能实现为React组件。尝试将jQuery与React结合使用会给您带来蠕虫。我已经做到了;我不建议这样做。

9o685dep

9o685dep2#

对于Bootstrap版本5,您还需要安装popper.js
安装

npm i bootstrap@5.2.3 @popperjs/core

用途

// /src/index.js
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";

相关问题