css - VUE 组件忽略 CSS

Question

我有以下 VUE 组件:

<template>
      <div>
          <div class="bottom-footer">  
            {{msg}}
          </div>    
      </div>
    </template>

    <script>
    export default {
      name: 'LayoutFooter',
      data () {
        return {
          msg: 'my test'
        }
      },
      mounted () {
      }
    }
    </script>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
      .bottom-footer {
        height: 200px;
        background-color: #A7BFE8;
      }
    </scoped> 

VUE 完全忽略了我的作用域 CSS。当页面呈现时，它根本没有应用。没有控制台错误。我尝试删除 scoped 属性，但它仍然被忽略。知道为什么 VUE 这样做吗？

Answer 1

<style scoped>
.bottom-footer {
height: 200px;
background-color: #A7BFE8;
}
    </style>

你需要关闭样式