VUE 组件忽略 CSS答案

【问题标题】：VUE component ignoring CSSVUE 组件忽略 CSS
【发布时间】：2018-01-22 18:06:23
【问题描述】：

我有以下 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 会这样做？

【问题讨论】：

你在使用 webpack 吗？
是的，我使用的是 cli 生成的 webpack 模板
假设您正在运行 dev 任务来自动编译代码？
检查元素，看看它不是你所期望的。这段代码应该（并且可能确实）工作得很好。我最好是 CSS 的东西。
@m.a.solano93 没错

标签： css vue.js

【解决方案1】：

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

你需要关闭样式

【讨论】：