twitter-bootstrap 在 create-react-app 中，添加 Bootstrap 4？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48069504/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In create-react-app, adding Bootstrap 4?
提问by Mark
Since create-react-app hides Webpack config without having to use eject, if I want to use something like reactstrap or react-bootstrap, should I eject or will I be fine without ejecting?
由于 create-react-app 无需使用就隐藏了 Webpack 配置eject，如果我想使用 reactstrap 或 react-bootstrap 之类的东西，我应该弹出还是不弹出就可以了？
Just curious as to what point one would decide when they need to ejectin order to use what they need? At this point in my app, I am merely prototyping, but it will go further with more dependencies and whatnot.
只是好奇人们会决定何时需要eject使用他们需要的东西？在我的应用程序的这一点上，我只是在进行原型设计，但它会随着更多的依赖关系和诸如此类的东西走得更远。
回答by sudo bangbang
When using create-react-app, you don't need to eject or edit webpack config for using react-bootstrap.
使用 create-react-app 时，您不需要弹出或编辑 webpack 配置来使用 react-bootstrap。
Install react-bootstrap
安装反应引导
npm install --save react-bootstrap bootstrap@3
You have to import css separately by adding this to the top of your src/index.js
您必须通过将其添加到您的顶部来单独导入 css src/index.js
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
Check out the documentation for using react-bootstrap.
Most dependencies can be added without changing webpack config. You can add packages and start using them.
大多数依赖项都可以在不更改 webpack 配置的情况下添加。您可以添加包并开始使用它们。
If you're really concerned about the possibility of changing webpack config, I'd urge you to checkout roadhog. It's a configurable alternative of create-react-app
如果您真的担心更改 webpack 配置的可能性，我建议您查看roadhog。它是 create-react-app 的可配置替代方案
回答by mofojed
It's easier now with the latest version of bootstrap: https://getbootstrap.com/docs/4.1/getting-started/webpack/
现在使用最新版本的引导程序更容易：https: //getbootstrap.com/docs/4.1/getting-started/webpack/
Install bootstrap and dependencies:
安装引导程序和依赖项：
npm install bootstrap jquery popper.js --save
Then in your app entry point (index.js) import bootstrap and the css:
然后在您的应用程序入口点 ( index.js) 中导入 bootstrap 和 css：
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
Good to go!
好去！
EDIT
编辑
There's now a section in the create-react-app documentation: https://facebook.github.io/create-react-app/docs/adding-bootstrap#docsNav
现在在 create-react-app 文档中有一个部分：https: //facebook.github.io/create-react-app/docs/adding-bootstrap#docsNav
They mention react-bootstrapand reactstrapif you'd rather use that, and you will not need to eject.
他们会提到react-bootstrap和reactstrap如果你更愿意使用它，你就不需要弹出。
回答by sendon1982
There is a project called 'reactstrap' https://reactstrap.github.io/which has all the steps you need to integrate Bootstrap with React
有一个名为“reactstrap”的项目https://reactstrap.github.io/，其中包含将 Bootstrap 与 React 集成所需的所有步骤
npm install bootstrap --save
npm install --save reactstrap react react-dom
Import Bootstrap CSS in the src/index.js file:
在 src/index.js 文件中导入 Bootstrap CSS：
import 'bootstrap/dist/css/bootstrap.min.css';
Import required reactstrap components within src/App.js file or your custom component files:
在 src/App.js 文件或您的自定义组件文件中导入所需的 reactstrap 组件：
import { Button } from 'reactstrap';
回答by Johnsackson
First off, install bootstrap's latest version in your application.
首先，在您的应用程序中安装引导程序的最新版本。
//To install bootstrap 4(latest version), jQuery, popper.js
npm i bootstrap jquery popper.js --save
Note: jQuery and popper.js are the dependencies of bootstrap.
注意：jQuery 和 popper.js 是 bootstrap 的依赖。
In index.js in your root directory and add the below line
在根目录中的 index.js 中添加以下行
//Include bootstrap's css
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
//Include bootstrap's js
import './../node_modules/bootstrap/dist/js/bootstrap.min.js';
In webpack.config.dev.js(Look for plugins and add the below code)
在 webpack.config.dev.js 中（查找插件并添加以下代码）
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
Popper: ['popper.js', 'default']
})
So It would look like this.
所以它看起来像这样。
plugins: [
....
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
Popper: ['popper.js', 'default']
})
]
