使用 sass 修改反应引导的正确方法是什么？

Question

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

导航栏.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.css而不是css

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