我已部署的NuxtJs网站的CSS无法正常工作

Question

我发现了一些与我类似的问题，但是没有什么对我足够近 我已经在Vuetify中使用NuxtJs建立了一个博客站点，并将其部署在Netlify上。该网站在大多数情况下看起来都很不错。我的网站有一个导航抽屉，应该具有＃659dbd的背景色。此颜色在显影中显示。但是，在已部署的站点上，背景色为白色。当我使用开发工具检查站点时，此颜色的确会显示在样式中，但其中有一条线，如下所示：

有人知道这是什么原因吗？

我看过Netlify陷阱，但对于类似这样的事情一无所获。

这很奇怪，因为我所有其他样式都很好。

如果我遗漏了任何内容或需要查看任何代码，请告诉我。

Answer 1

可能还有其他更具体的规则。

<div class="list">
  <div class="drawer"> Item </div>
</div>


<style>
 .list {
  background-color: #4589e0;
 }
 .drawer {
  background-color: #1707a3;
 }
 .list .drawer {
  background-color: #a3073b;
 }
</style>

在此处详细了解：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 2

之所以会发生这种情况，是因为您可能使用了nuxt / vuetify模块，并且在开发中使用了内置的vuetify捆绑包，但在生产中则使用了treehake版本。并使用Treeshaken版本的vuetify可以在页面上动态加载CSS。因此，首先加载您的页面样式，然后adn然后vuetify加载其自己的组件样式，并覆盖您自己的样式