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關閉風格