我部署的 NuxtJs 站点的 CSS 不工作

Question

我发现了一些与我类似的问题，但对我来说还不够接近我使用 NuxtJs 和 Vuetify 构建了一个博客站点，并将其部署在 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 包，但对于生产它使用 treeshake 版本。使用 treeshaken 版本的 vuetify，它会在页面上动态加载 css。所以首先加载你的页面样式，然后 vuetify 加载它自己的组件样式并覆盖你自己的样式

我部署的 NuxtJs 站点的 CSS 不工作

The CSS for my deployed NuxtJs site is not working

netlify

nuxt.js

vuetify.js