Блог

Я работаю над сайтом react, который использует 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;
}
 

Убедитесь, что у вас есть webpack и загрузчик scss, работающие должным образом. Возможно, вам потребуется импортировать scss/bootstrap.scss вместо css

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