VUE component ignoring CSS

Question

I have the following VUE component:

<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 is completely ignoring my scoped CSS. When page is rendered its simply not applied. There are no console errors. Ive tried removing the scoped attribute and its still ignored. Any ideas why VUE is doing this?

Assuming you're running the dev task to automatically compile code? — miguelsolano
– miguelsolano, Commented Aug 14, 2017 at 20:26
Inspect the element and see what it's not what you expect. This code should (and likely does) work just fine. I'm better it's a CSS thing. — Bill Criswell
– Bill Criswell, Commented Aug 14, 2017 at 20:30

cannap · Accepted Answer · 2017-08-14 20:31:06Z

2

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

you need to close style

answered Aug 14, 2017 at 20:31

cannap

1183 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VUE component ignoring CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related