我是 Nuxt 的新手。
我有一個頁面
// pages/page1.vue
<template>
<h1 >Page</h1>
</template>
<style>
.title {
font-size: 16px;
}
</style>
然后，在布局下我有一個 error.vue
//layouts/error.vue
<template>
<h1 >Error Page</h1>
</template>
<style>
.title {
color: red;
font-size: 18px;
}
</style>
我發現在page1渲染時，標題顯示為紅色。我檢查了檢查元素，發現錯誤的 CSS 以及第 1 頁的 CSS 已應用。
我在 layouts 目錄中沒有 default.vue。
如前所述，這是我在 Nuxt（或 vue）中的第一個專案，并且想了解如何確保頁面的 CSS 僅應用于該頁面。這是在開發模式（npm run dev）。謝謝
uj5u.com熱心網友回復：
問題是沒有在應用程式級別呈現范圍屬性的 CSS。您應該在樣式標簽中使用作用域屬性作為
布局/error.vue
<template>
<h1 class="title">Error Page</h1>
</template>
<style scoped>
.title {
color: red;
font-size: 18px;
}
</style>
**當<style>標簽具有 scoped 屬性時，其 CSS 將僅應用于當前組件的元素，否則會考慮全域樣式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/418948.html
標籤：
上一篇：當我使用腳本設定時，Vue3Element-Plus表無法顯示axios結果
下一篇：在動態欄位上觸發觀察者