繁体 English 中英

无法覆盖引导程序 styles

[英]Unable to override bootstrap styles

原文 2022-01-22 18:17:09 2 0 reactjs/ twitter-bootstrap/ sass/ react-bootstrap

我尝试按照 Bootstrap 网站上列出的说明以及各种 StackOverflow 问题进行操作，但仍然无法覆盖 Bootstrap 的单个样式元素。 我很感激帮助，我对 web 开发人员并不是特别了解。

这是我的设置。

我使用 create-react-app 来生成文件结构。 我有一个 index.js，我立即import './index.scss';

这是我的 index.scss

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

body {
  margin: 0;
  font-family: Catamaran, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

code {
  font-family: Catamaran source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; }

/* playfair-display-regular - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/playfair-display-v25-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local(""), url("./fonts/playfair-display-v25-latin-regular.eot?#iefix") format("embedded-opentype"), url("./fonts/playfair-display-v25-latin-regular.woff2") format("woff2"), url("./fonts/playfair-display-v25-latin-regular.woff") format("woff"), url("./fonts/playfair-display-v25-latin-regular.ttf") format("truetype"), url("./fonts/playfair-display-v25-latin-regular.svg#PlayfairDisplay") format("svg");
  /* Legacy iOS */ }

/* catamaran-regular - latin */
@font-face {
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/catamaran-v8-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local(""), url("./fonts/catamaran-v8-latin-regular.eot?#iefix") format("embedded-opentype"), url("./fonts/catamaran-v8-latin-regular.woff2") format("woff2"), url("./fonts/catamaran-v8-latin-regular.woff") format("woff"), url("./fonts/catamaran-v8-latin-regular.ttf") format("truetype"), url("./fonts/catamaran-v8-latin-regular.svg#Catamaran") format("svg");
  /* Legacy iOS */ }

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1020px,
  xxl: 1080px
);

$blue:   #306779;
$primary: #306779;

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

fonts 加载正确，但引导变量不正确。 我还尝试将 scss 文件手动转换为 css 文件并使用<link rel="stylesheet" href="../scss/custom.css" />将其导入<head> ，但这也没有工作，我仍然看到正常的引导配色方案。