Buenas,
Estoy realizando un proyecto a través de una asignatura de la universidad y ando un poco estancado.
El primer trabajo consistía en hacer una página web (css,html y js). Ahora, la segunda práctica consiste en mejorar esa web con vue.js.
Por una parte tengo el archivo AppHeader.vue:
spoiler
<template>
<header id="header" class="header">
<div class="header-container container">
<nav>
<a class="btn-icon logo-btn" href="/">
<img
class="logo logo-normal"
src="../assets/logo.svg"
alt="Logo petinder"
/>
<img
class="logo logo-white"
src="../assets/logo_white.svg"
alt="Logo petinder"
/>
</a>
<ul class="menu-links">
<li><a href="">Servicios</a></li>
<li><a href="">Sobre nosotros</a></li>
<li><a href="">Contactar</a></li>
</ul>
</nav>
<a href="" class="btn btn-login btn-light" title="Iniciar sesión"
>Iniciar sesión</a
>
<div id="menuIcon" class="menu-icon">
<div id="menuIconBar" class="menu-icon-bar"></div>
</div>
</div>
</header>
<div class="menu" id="menu">
<nav id="navMobile" class="menu-nav-mobile">
<ul class="menu-links">
<li><a href="">Servicios</a></li>
<li><a href="">Sobre nosotros</a></li>
<li><a href="">Contactar</a></li>
</ul>
<a href="" class="btn-login btn btn-light" title="Iniciar sesión"
>Iniciar sesión</a
>
</nav>
</div>
</template>
<script>
export default {
name: "Header",
};
</script>
<style lang="scss">
.header {
background: $accent;
text-align: center;
padding: 10px;
}
.aright {
text-align: right;
}
.color-red {
color: #e02d54;
}
.color-green {
color: #41b883;
}
.main-title,
.title {
font-weight: 800;
font-family: "Poppins", sans-serif;
}
.main-title {
font-size: 52px;
margin-bottom: 15px;
}
.main-title span {
color: white;
}
@media (max-width: 768px) {
.main-title {
font-size: 40px;
line-height: 1.3em;
}
}
.title {
font-size: 30px;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.title {
font-size: 22px;
}
}
.btn-icon {
background: transparent;
border: none;
padding: 5px 10px;
}
.btn-light {
border-color: #5b49fe;
color: #5b49fe;
background: white;
}
.btn-light:hover {
background-color: #5b49fe;
color: white;
}
.ball-icon {
width: 74px;
height: 74px;
background: white;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: 2px 2px 6px #7de88c;
}
.ball-icon img {
width: 100%;
height: auto;
max-height: 40px;
}
.header {
width: 100%;
z-index: 100;
transition: all 0.4s ease;
top: 0px;
position: fixed;
}
.header .logo-btn {
padding: 0;
}
.header .logo {
height: 50px;
width: auto;
margin-right: 20px;
}
.header .logo.logo-normal {
display: none;
}
.header.sticky {
background: white;
box-shadow: 0 4px 8px 0 rgba(13, 10, 44, 0.04);
}
.header.sticky .logo.logo-normal {
display: block;
}
.header.sticky .logo.logo-white {
display: none;
}
.header .header-container {
align-items: center;
display: flex;
justify-content: space-between;
height: 70px;
}
.header .header-container nav {
align-items: center;
display: flex;
}
@media (max-width: 992px) {
.header .header-container > .btn-login {
display: none;
}
}
.header .header-container .menu-links {
display: flex;
}
.header .header-container .menu-links li {
margin-right: 15px;
font-weight: 500;
}
.header .header-container .menu-links li a {
color: black;
}
.header .header-container .menu-links li a:hover {
color: #5b49fe;
text-decoration: none;
}
@media (max-width: 992px) {
.header .header-container .menu-links {
display: none;
}
}
</style>Por otra parte tengo una carpeta con archivos scss. Uno de ellos, se llama _base.scss. Este archivo lleva el siguiente codigo:
spoiler
body {
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: $text-color;
font-family: $font-family-sans-serif;
font-size: 16px;
max-width:100%;
overflow-x: hidden;
}
ul, li{
list-style: none;
padding:0;
margin: 0;
}
.app-container{
min-height: calc(100vh - 61px);
display: flex;
flex-direction: column;
//padding-top: 70px;
}
main{
height: 100%;
flex:1;
}El tema es que cuando visualizo la web, no coge el estilo del body que está en _base.scss y no entiendo el porqué.
¿Alguna ayuda? Gracias
