usando o bootstrap com o vue webapp: como personalizar
estou usandobootstrap-4 no meu aplicativo da Web Vue, mas não consigo personalizar isso, como é explicadoaqui.
eu tenho meuindex.html que usaCDN do Bootstrap, como a seguir:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sample</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="/static/custom.scss" type="text/x-scss,"> ==> where I am overwriting variable
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</head>
<body>
<div id="app"></div>
<script src="/dist/client-vendor-bundle.js"></script>
<script src="/dist/client-bundle.js"></script> -->
</body>
</html>
Eu também tentei mudar a ordem doscustom.scss ebootstrap.css noindex.html também.
A seguir écustom.scss, onde estou substituindo variáveis:
$body-bg: #f5f5f5;
$body-color: #f5f5f5;
$enable-flex: true;
Mas isto não está funcionando.
Também tentei importar isso no meu componente de aplicativo, como a seguir:
<style lang="scss">
@import 'custom.scss';
// Following also did not work
$body-bg: #333;
$body-color: #999;
</style>
Como sobrescrevo essas variáveis para personalizar meu webapp.