为什么写的css样式页面上加载不出来呢？

您好，老师，我想咨询一下header样式，为什么css样式写完以后页面上的效果显示不出来呢，我这边console提示页面也没有报错

比如给header区域添加

background:#00bcd4

     color:#fff  背景颜色和字体颜色显示不出来是因为什么原因呢？ 我写的css样式在页面里面没有加载上去

版本安装应该是没有问题的，stylus的版本是@0.54.5 stylus-loader@3.0.1 和node版本应该是没有关系的，不是很清楚问题出在哪里。

​我这边通过npm加载老师写的源代码是没有问题的，页面是可以正常显示的

相关代码：

<template>
<div class="header">
<div class="header-left">返回</div>
<div class="header-input">内容</div>
<div class="header-right">城市</div>
</div>
</template>
<script>
export default {
name:'HomeHeader'
}
</script>
<style scoped>
.header
display:flex
     height:.86rem
     background:#00bcd4
     color:#fff
  .header-left
width: .64rem
float:left
.header-input
flex:1
.header-right
width:1.24rem
float:right
text-align:center
</style>