What's the proper way of modifying react-bootstrap using sass?

Question

I'm working on a react site which uses node-sass and am trying to modify the text that's within the Navbar. What's the correct way of modifying default bootstrap variables? I've tried this so far to modify the text that's in a navigation bar but can't seem to get it to work as intended:

NavigationBar.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;

and 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

Make sure you have webpack and scss loader working properly. You might need to import the scss/bootstrap.scss instead of css

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