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

Posted 2023-03-23

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

【英文标题】：How to customize bootstrap 4 in reactjs app with reactstrap dependency?

【发布时间】：2018-07-09 10:53:20

【问题描述】：

我开始使用reactstrap 开发一个 React 应用程序。我按照 Get Started 运行以下命令：

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 和我的项目node_modules 文件夹中看到"bootstrap": "^4.0.0" 和bootstrap/。嗯。

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

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

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

谢谢

【参考方案1】：

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

安装 Sass：npm install node-sass --save 安装 reactstrap。第一个引导程序：npm install bootstrap --save。然后反应带：npm install --save reactstrap react react-dom 创建您的自定义引导主题文件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";

【参考方案2】：

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

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

然后重新分配样式。

但首先你应该调整你的 webpack 以理解 .scss 文件扩展名

【讨论】：

我们如何配置 webpack 来理解 .scss 文件扩展名？