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>

你需要关闭风格

VUE组件忽略CSS

1 个答案: