I have a bit problem to link vue.js and scss.

I have this AppHeader.vue archive:

<template>
  <header id="header" >
    <div >
      <nav>
        <a  href="/">
          <img
            
            src="../assets/logo.svg"
            alt="Logo petinder"
          />
          <img
            
            src="../assets/logo_white.svg"
            alt="Logo petinder"
          />
        </a>

        <ul >
          <li><a href="">Servicios</a></li>
        </ul>
      </nav>
    </div>
  </header>
</template>

<script>
export default {
  name: "Header",
};
</script>

<style lang="scss">
.header {
  background: $accent;
  text-align: center;
  padding: 10px;
}

.aright {
  text-align: right;
}

I have another folder where I have four scss archives. One of them, _base.scss, has the css body like this:

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;
}

The problem is that css body is not working on the AppHeader.vue. When I see it on the webrowser, the body has no width.

How can I link them?

Thanks.

CodePudding user response：

best way for the link your css file to the vue component is the import your css to the App Header.vue component, like this

<style lang="scss">
    @import "./path/_base.scss"; // please enter your current path
</style>

CodePudding user response：

Another way to do this is by using this inside the style,

result: <style src='../style.css' scoped>

It's more useful because you can use scoped with this method.