Nuxt: css of error.vue 出现在页面渲染中

Question

我是 Nuxt 的新手。

我有一个页面

pages/page1.vue

<template>
   <h1 class="title">Page</h1>
</template>
<style>
  .title {
     font-size: 16px;
  }
</style>

然后，在布局下我有一个 error.vue

layouts/error.vue

<template>
  <h1 class="title">Error Page</h1>
</template>
<style>
  .title {
    color: red;
    font-size: 18px;
  }
</style>

我发现当 page1 渲染时，标题显示为红色。我检查了检查元素，发现应用了错误和第 1 页的 CSS。

我在布局目录中没有default.vue。

如前所述，这是我在 Nuxt（或 vue）中的第一个项目，想了解如何确保页面的 CSS 仅应用于该页面。这是在开发模式下 (npm 运行 dev)。谢谢

Answer 1

问题是 CSS 在应用程序级别没有范围属性呈现。您应该在 styles 标签中使用 scoped 属性作为

layouts/error.vue

<template>
  <h1 class="title">Error Page</h1>
</template>
<style scoped>
  .title {
    color: red;
    font-size: 18px;
  }
</style>

**当 <style> 标签具有 scoped 属性时，其 CSS 将仅应用于当前组件的元素，否则考虑全局样式。

Nuxt: css of error.vue appears in page rendering