Question

我添加了此CSS规则

<style>
body {
  background-color: rgb(184, 182, 182);
}

#app {
...
</style>

到标签中的我的 App.vue 文件（未限制范围；-）；如vue mastery courses所述。哪个BTW有很大帮助！

Babacadabra在related post中也提出了这种方法。

一切正常，可以在dist / css文件夹中找到组件的本地定义（作用域）样式。但是我对背景色的全局样式声明消失了。结果，网站布局与我在本地测试的网站布局有所不同（使用“ vue服务”）：

未应用背景色。

我在做什么错了？

我通过将background-color声明直接添加到索引文件中来帮助自己，但这应该只是一个补丁。我正在寻找最终的解决方案，因此完整的工作流程可以按预期工作，并且本地版本和远程版本的行为相同。

更新（更多代码）：如此处要求的更多详细信息，即完整的App.vue。我希望这已经足够了，因为我（非常基本的..-）对vue的理解是将全局样式声明放入此模块中。

<template>
  <div id="app">
    <img class="vservuLogo" alt="VservuLogo" src="./assets/VservU-Logo.png">
    <HelloWorld msg="Welcome to VservU GmbH Munich"/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

<style>
body {
  background-color: rgb(184, 182, 182);
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.vservuLogo {
  width: 50%;
}
</style>

UPDATE2：

由于我无法在新项目中重现该行为，因此我猜我只是错过了清除缓存的操作！

版本不包含vue cli全球风格

0 个答案: