如何在 reactjs 应用程序中包含 bootstrap css 和 js？

IT技术 twitter-bootstrap reactjs webpack
2021-03-23 05:36:44

我是 reactjs 的新手，我想在我的 React 应用程序中包含引导程序

我已经安装了引导程序 npm install bootstrap --save

现在，想在我的 React 应用程序中加载 bootstrap 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;

我的问题是“如何在 node_modules 的 reactjs 应用程序中包含 bootstrap css 和 js？” 如何设置引导程序以包含在我的react应用程序中？

6个回答

如果您不熟悉 React 并使用create-react-appcli 设置，请运行下面的npm命令以包含最新版本的引导程序。

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在目标元素上使用as 属性（react使用classNameas 属性而不是class）。

js文件呢？jquery bootstrap.js
2021-05-27 05:36:44
我找到了这篇文章，它可能会有所帮助blog.logrocket.com/how-to-use-bootstrap-with-react-a354715d1121
2021-05-30 05:36:44
我不明白为什么不把它链接到 html 模板中
2021-05-31 05:36:44
2021-06-12 05:36:44
Relative imports outside of src/ are not supported.
2021-06-15 05:36:44

通过npm，您将运行以下

npm install bootstrap jquery --save
npm install css-loader style-loader --save-dev

如果 bootstrap 4，还要添加依赖 popper.js

npm install popper.js --save

将以下内容（作为新对象）添加到您的webpack 配置中

loaders: [
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }

将以下内容添加到您的索引或布局中

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
对于 Bootstrap 5：yarn add @popperjs/core或npm i @popperjs/core
2021-05-22 05:36:44
无法解析“popper.js”
2021-06-01 05:36:44
完美的最新答案之一 +1
2021-06-13 05:36:44

你不能在 React 应用程序中使用基于 Bootstrap Jquery 的 Javascript 组件，因为任何试图在 React 之外操作 DOM 的行为都被认为是不好的做法。在这里您可以阅读有关它的更多信息。

如何在 React 应用中包含 Bootstrap：

1)推荐。您可以包含 Bootstrap 的原始 CSS 文件作为其他答案指定。

2) 看看react-bootstrap库。它是专门为 React 编写的。

3) 对于 Bootstrap 4，有reactstrap

奖金

这些天我通常避免提供即用型组件的 Bootstrap 库（上面提到的 react-bootstrap 或 reactstrap 等）。随着您越来越依赖它们所采用的props（您无法在其中添加自定义行为），并且您将失去对这些组件生成的 DOM 的控制。

所以要么只使用 Bootstrap CSS，要么不使用 Bootstrap。一般的经验法则是：如果不确定是否需要它，则不需要它。我见过很多包含 Bootstrap 的应用程序，但只使用了少量的 CSS，有时大部分 CSS 被自定义样式覆盖。

不幸的是，react-bootstrap 或 reactstrap 都不支持 Bootstrap 4。
2021-05-29 05:36:44
“离开引导程序”是一个非常可行的选择。很好的建议。
2021-06-01 05:36:44
@Zim 现在他们做到了！
2021-06-08 05:36:44
使用选项 1)，您如何包含 Bootstrap Javascript（和 jquery）？或者你没有？
2021-06-11 05:36:44

您可以import随心所欲地使用 css 文件。如果您根据需要配置了加载器，Webpack 将负责捆绑 css。

就像是，

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

和 webpack 配置一样，

loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }]

注意：您还必须添加字体加载器，否则会出错。

好的，现在来看看 webpack 是什么（有点像包含一些东西并使用它变成了另一种可怕的学习 js 的东西），ny visionw 是在我的教程应用程序中使用 bootstrap3 样式的按钮......现在我会't
2021-05-27 05:36:44
谢谢你的回复。需要任何用于 style-loader 和 css-loader 的 npm module吗？
2021-05-28 05:36:44
是使用style-loader css-loader装载机
2021-06-03 05:36:44
@ J.Guarin如果您正在使用Facebook的创建反应的应用程序内将设立webpack与style-loader你。
2021-06-14 05:36:44

我也遇到过类似的场景。我的设置如下所示

npm install create-react-app

这将为您提供样板代码设置以开始。使用 App.js 文件作为主要逻辑。

稍后您可以在由 CLI 工具创建的 index.html 中使用引导 CDN。或者

npm install bootstrap popper jquery

然后简单地将它包含在 App.js 文件中。

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.bundle'

很少有作者提到使用 className 属性而不是 class，但就我而言，两者的工作方式如下。但是，如果您使用 class 并在浏览器上的开发人员工具中查看控制台，则会看到使用 class 的错误。因此请改用 className。

    <div className="App" class = "container"> //dont use class attribute

并且不要忘记删除默认的 CSS 导入以避免与引导程序发生冲突。

希望有帮助，快乐编码！！！

这必须是公认的答案
2021-05-22 05:36:44
这对我来说是最好的答案。此外，如果您使用 SCSS，则加载您自己的 css 而不是引导程序。
2021-06-18 05:36:44
其它你可能感兴趣的问题
上一篇从 REST API 返回的图像始终显示损坏 下一篇如何使用带有 Redux 的连接从 this.props 获得简单的调度？