css - 为什么包装类在 Vue.js 中不起作用？

Question

我是 Vue.js 的新手，现在正在研究基本的 css。我用.wrapper类用 1200px 包装孩子，但它不起作用.. 为什么？

例子.vue

<template>
  <header>
    <div class="wrapper">
      <p>Test</p>
    </div>
  </header>
</template>

<script>
export default {};
</script>

<style lang="scss">
$color: red;
header {
  height: 48px;
  background: $color;
}
.wrapper {
  width: 1200px;
  margin: 0 auto;
}
</style>

Wrapper div 不包装子元素p，我不知道为什么这不起作用，即使它是非常简单的示例......

标签： cssvue.js