为什么 Nuxt 会从其他页面获取样式？答案

【问题标题】：Why Nuxt is taking styles from other pages?为什么 Nuxt 会从其他页面获取样式？
【发布时间】：2021-12-03 00:15:23
【问题描述】：

我的 Nuxt 项目中有两个页面：

|-pages/
|---index.vue
|---login/
|-----index.vue

pages 内部的index.vue 有以下样式：

<style lang="scss">

   html,
   body,
   #__nuxt,
   #__layout,
   main {
      height: 100%;
   }

</style>

如您所见，我需要我的容器占据所有屏幕高度，因此我需要将该样式放入所有 Nuxt 容器中，因此，我的样式无法限定范围。这里一切都很好，但是当我转到/login 时，我不想要那些样式，但出于某种原因，Nuxt 正在应用这些样式，即使我删除了pages/login/index.vue 中的<styles> 标签，我也不知道为什么……

理论上，如果我在 /login 中，则不应加载 pages/index.vue 样式 ????

我找到的唯一解决方案是将scoped 属性设置为page/index.vue 样式标签，但它不允许我更改Nuxt 的容器高度。

你知道更好的方法吗？

【问题讨论】：

标签： css vue.js styles nuxt.js

【解决方案1】：

如果您定义全局 CSS 样式（不限定它们的范围），它们确实会应用于您的整个应用程序。
因此，具有属性的样式在login/index.vue 中的行为完全没问题。

这叫CSS Cascade。

如果您不希望将行为应用于其他页面，则需要覆盖其他 .vue 文件中的属性（这在一定程度上可以）或限定根 @987654325 的样式@。

如果您想将样式应用于特定的页面组，当然也可以使用Nuxt layouts。

另外，height: 100%; 是一个非常通用的属性。如果您使用页面流（通过将常规 HTML 块添加到另一个），您将不会真正需要它，它会相应地放置它们。
对于进一步的 CSS 问题，强烈建议使用浏览器开发工具的检查器，这样可以省去一些麻烦！

【讨论】：