由于 create-react-app 隐藏了 Webpack 配置而无需使用 eject
,如果我想使用像 reactstrap 或 react-bootstrap 这样的东西,是否应该弹出或不弹出就可以了?
只是好奇什么时候需要决定何时需要 eject
以使用所需内容? 在我的应用程序中,我只是原型设计,但会使用更多依赖项等等。
由于 create-react-app 隐藏了 Webpack 配置而无需使用 eject
,如果我想使用像 reactstrap 或 react-bootstrap 这样的东西,是否应该弹出或不弹出就可以了?
只是好奇什么时候需要决定何时需要 eject
以使用所需内容? 在我的应用程序中,我只是原型设计,但会使用更多依赖项等等。
npm install --save react-bootstrap bootstrap@3
您需要将以下代码添加到您的src/index.js
文件顶部,单独导入CSS样式表:
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
大多数依赖项可以在不更改webpack配置的情况下添加。您可以添加软件包并开始使用它们。
如果您真的担心可能会更改webpack配置,请尝试Roadhog。这是一个可配置的create-react-app替代品。
现在使用最新版本的bootstrap更容易了:https://getbootstrap.com/docs/4.1/getting-started/webpack/
安装bootstrap及其依赖项:
npm install bootstrap jquery popper.js --save
在您的应用程序入口点(index.js
)中导入bootstrap和css样式:
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
没问题!
编辑
现在create-react-app文档中有一节:https://facebook.github.io/create-react-app/docs/adding-bootstrap#docsNav
如果你更愿意使用的话,他们提到了react-bootstrap和reactstrap,并且你将不需要弹出。
//To install bootstrap 4(latest version), jQuery, popper.js
npm i bootstrap jquery popper.js --save
//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';
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
Popper: ['popper.js', 'default']
})
plugins: [
....
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
Popper: ['popper.js', 'default']
})
]
有一个名为“reactstrap”的项目https://reactstrap.github.io/,它提供了将Bootstrap与React集成所需的所有步骤。
npm install bootstrap --save
npm install --save reactstrap react react-dom
import 'bootstrap/dist/css/bootstrap.min.css';
请在src/App.js文件或您的自定义组件文件中导入所需的reactstrap组件:
import { Button } from 'reactstrap';
对于BS5,它是新的且尚不稳定。
npm i bootstrap@5.0.0-alpha1 --save
然后在 index.js 文件中
import 'bootstrap/dist/css/bootstrap.min.css';