使用 sass 修改 react-bootstrap 的正确方法是什么？

Question

我正在开发一个使用 node-sass 的反应站点，并试图修改导航栏中的文本。修改默认引导变量的正确方法是什么？到目前为止，我已经尝试过修改导航栏中的文本，但似乎无法按预期工作：

导航栏.jsx

import { Navbar, Nav } from 'react-bootstrap';
import React from 'react';

export function NavigationBar() {
  return (
    <div>
      <Navbar bg="light" expand="md">
        <Navbar.Brand href="#home">Name Here</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto font-weight-bold">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </div>
  );
}

App.js

import './App.scss';
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

import { NavigationBar } from './components/NavigationBar';

function App() {
  return (
    <div className="App">
      <NavigationBar />
    </div>
  );
}

export default App;

和 App.scss：

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.Navbar {
  font-size: 75px;
}

Answer 1

确保您的 webpack 和 scss 加载器正常工作。您可能需要导入 scss/bootstrap.scss 而不是 css

import './App.scss';  // set scss variables here if you want.
import 'bootstrap/scss/bootstrap.scss';