链接vue.js上的css

Question

我在链接vue.js和scs时遇到了一些问题。

我有这个AppHeader.vue档案：

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

我还有一个文件夹，里面有四个scs档案。其中一个名为_base.scss的css主体如下所示：

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

问题是css body在AppHeader.vue上不起作用。当我在浏览器上看到它时，body没有宽度。

如何将它们链接起来？

谢谢。

Answer 1

另一种方法是在样式中使用

结果：<style src='../style.css' scoped>

它更有用，因为您可以将scoped与此方法一起使用。

Answer 2

将css文件链接到vue组件的最佳方式是将css导入到AppHeader.vue组件，如以下

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

课程确保在您的项目中使用webpack，帮助您实现模块化