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。当页面呈现时，它不会被应用。没有控制台错误。我试图删除范围的属性，它仍然被忽略。任何想法，为什么VUE是这样做的？

Answer 1

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

你需要的是你使用的WebPack关闭风格