如何在具有 reactstrap 依赖项的 reactjs 应用程序中自定义 bootstrap 4？

IT技术 node.js reactjs reactstrap
2021-05-11 13:59:48

我开始使用reactstrap开发 React 应用程序。我按照入门运行以下命令：

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

npm install bootstrap --save
npm install --save reactstrap@next react react-dom

然后，我可以看到"bootstrap": "^4.0.0"在package.json的dependencies和引导/在我的项目node_modules文件夹中。好。

现在我想改变，例如，boostrap 原色。让我们开始简单:)。我已阅读Bootstrap 4 Theming，但custom.scss在我的项目中找不到任何内容。

使用 reactstrap 时添加和编辑引导程序主题的正确方法是什么？另外，自从/node_modulesin以来，我如何在引导程序更新中保持我的更改.gitignore？

PS：我是网络/react开发的新手，所以如果我问/说任何愚蠢或明显的事情，我深表歉意。

谢谢

2个回答

这里的说明：https : //facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet

  1. 安装 Sass： npm install node-sass --save
  2. 安装react带。第一个引导程序：npm install bootstrap --save. 然后react带：npm install --save reactstrap react react-dom
  3. 创建您的自定义引导程序主题文件src/styles/custom-btsp.scss并根据需要进行编辑（请参阅主题 v4）。
  4. 添加import './styles/css/custom.scss';在src/index.js

完毕！

这是我的custom-btsp.scss文件示例：

$theme-colors: (
  "primary": #ffb800
);

$btn-border-radius: 3000px;

@import "~bootstrap/scss/bootstrap";

您应该在项目结构中创建 SCSS 文件。使用 scss 导入包含 defal=ult 引导程序样式

@import "node_modules/bootstrap/scss/bootstrap";

然后重新分配样式。

但是你应该做的第一件事是调整你的 webpack 以了解 .scss 文件扩展名

其它你可能感兴趣的问题
上一篇3D 打印纸板箱 下一篇这个非常大的平板可以用 ABS 打印吗？