.vue文件怎么写css样式

.vue文件由结构——行为——样式三部分构成，分别对应template、script、style标签，css样式就写在style标签中。

一、直接在Test.vue中写css样式

<template>
  <h1>这是标题</h1>
</template>
 
<script>
  export default {
    name: "test"
  }
</script>
<style scoped>
    h1{
        color: red;
    }
</style>

二、在style标签中使用@import引入外部样式

<template>
  ...
</template>
 
<script>
  export default {
    name: "test"
  }
</script>
<style scoped>
 @import "style.css";
</style>

文件组织形式如下：