![](/img/trans.png)
[英]what's the proper way to implement darkmode in VueJs with SASS using variables
[英]What's the proper way of modifying react-bootstrap using sass?
我正在开发一个使用 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>
);
}
应用程序.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';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.