如何更改 react 内置引导程序的原色？答案

【问题标题】：How to change the primary color of the react built-in bootstrap?如何更改 react 内置引导程序的原色？
【发布时间】：2019-09-14 21:45:46
【问题描述】：

我正在为我的网站使用 react 内置引导程序（无需导入任何库并安装额外包的引导程序）。现在，我需要一个定制的原色。我应该如何做到这一点？

【问题讨论】：

你在使用 reactstrap 库吗？
不，我正在使用 react 内置的 Bootstrap 类和组件。
从'react'导入反应，{组件}；
@pesehr 我正在使用 reactstrap。你有什么线索可以做同样的事情吗？

标签： javascript reactjs bootstrap-4

【解决方案1】：

要自定义 Bootstrap，请创建一个名为 src/custom.scss（或类似文件）的文件并导入 Bootstrap 源样式表。在导入的文件之前添加任何覆盖。您可以参考 Bootstrap 的文档以获取可用变量的名称。 Bootstrap 的文档：https://getbootstrap.com/docs/4.1/getting-started/theming/#css-variables

例如：

// change the theme
$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';

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

import './custom.scss';

【讨论】：

您必须在 Bootstrap css 导入之前输入$theme-colors。
要在您的 React 应用程序中启用 scss，您需要通过 npm install node-sass 或 yarn add node-sass 安装 node-sass 包。
我之前尝试过类似的解决方案，但忘记在前缀中添加~。感谢您节省时间！
我也必须导入bootstrap.min.css 吗？如果我不这样做，我的静止就会分崩离析。
node-sass 已弃用。要启用 scss，您应该运行 npm install sass。链接：create-react-app.dev/docs/adding-a-sass-stylesheet