create-react-app 添加 Bootstrap

🌙
手机阅读
本文目录结构
axihe

添加 Bootstrap

虽然您不必使用任何特定的库来将 Bootstrap 与 React 应用程序集成,但是通常比尝试包装 Bootstrap jQuery 插件要容易。React Bootstrap 最受欢迎的方案。

对于寻求以较小的功能为代价的小型构建的项目来说,reactstrap 也是一个不错的选择。

每个项目各自的文档站点均具有安装和使用它们的详细说明。两者都依赖于 Bootstrap css 文件,因此也要安装它:

npm install --save bootstrap

src/index.js 文件的开头导入 Bootstrap CSS 和可选的 Bootstrap 主题 CSS :

import 'bootstrap/dist/css/bootstrap.css';
// 在下面放置任何其他导入,
// 以便组件中的CSS优先于默认样式。

src/App.js 文件或自定义组件文件中导入所需的 reactstrap 组件:

import { Button } from 'reactstrap';

现在,你已准备好在 render 方法中定义的组件层次结构中使用导入的 reactstrap 组件。

这是使用 reactstrap 重构的 App.js 的示例。

使用自定义主题

注意:此功能适用于 react-scripts@2.0.0 及更高版本。

有时你可能需要调整 Bootstrap(或等效包)的视觉样式。

react-scripts@2.0.0 开始,你可以导入 .scss 文件。 这使得可以将包的内置 Sass 变量用于全局样式首选项。

要在 Create React App 中启用 scss,您需要安装 node-sass。

npm install --save node-sass

要自定义 Bootstrap ,请创建一个名为 src/custom.scss(或类似文件)的文件,然后导入 Bootstrap 源样式文件。

在导入的文件 之前 添加一些覆盖样式。 你可以参考 Bootstrap 的文档 以获取可用变量的名称。

// 在导入之前覆盖默认变量
$body-bg: #000;

// 导入 Bootstrap 及其默认变量
@import '~bootstrap/scss/bootstrap.scss';

注意: 你必须在 node_modules 之前添加 ~ 前缀,如上所示。

最后,导入新创建的 .scss 文件,而不是 src/index.js 文件开头的默认 Bootstrap .css,例如:

import './custom.scss';

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang