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

Question

我开始使用 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

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

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

使用 reactstrap 时添加和编辑 bootstrap 主题的正确方法是什么？另外，由于 /node_modules 在 .gitignore 中，我如何在 bootstrap 更新中保持我的更改？

PS：我是网络/反应开发的新手，所以如果我 ask/say 有任何愚蠢或显而易见的事情，我深表歉意。

谢谢

Answer 1

您应该在项目结构中创建 SCSS 文件。使用 scss import

包含 defal=ult bootstrap 样式

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

然后重新分配样式。

但您首先要做的是调整您的 webpack 以理解 .scss 文件扩展名

Answer 2

此处说明：https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet

安装Sass：npm install node-sass --save
安装reactstrap。首先bootstrap：npm install bootstrap --save。然后反应：npm install --save reactstrap react react-dom
创建您的自定义 bootstrap 主题文件 src/styles/custom-btsp.scss 并根据需要进行编辑（参见 theming v4）。
在src/index.js中添加import './styles/css/custom.scss';

完成！

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

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

$btn-border-radius: 3000px;

@import "~bootstrap/scss/bootstrap";

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

How to customize bootstrap 4 in reactjs app with reactstrap dependency?

node.js

reactjs

reactstrap