我正在尝试向 Nuxt 中的 body 标记添加样式，但 default.vue 似乎会覆盖它（它不是像我的纯 html 构建中那样从 body 继承 - 我将其移植到 Nuxt）。
我在CSS中有这个：
body{font-family:'Geomanist', sans-serif;color:#000 !important}
但是，当我运行它时，它不断从 default.vue 布局组件继承“html”（如您所见，我根本不将其包含在我的构建中）：
<script scoped>
export default {
head() {
return {
script: [
{
src: '/js/vendor/jquery.min.js'
},
{
src: '/js/site.js'
}
]
}
}
}
</script>
<style scoped>
@import '~/assets/css/style.min.css';
</style>
在开发者工具中看起来像这样：
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
它应该看起来像：
body {
font-family: 'Geomanist', sans-serif;
color: #000;
}
default.vue 看起来像：
<template>
<div>
<Nuxt />
</div>
</template>
<style>
html {
font-family:
'Source Sans Pro',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
}
.button--green {
display: inline-block;
border-radius: 4px;
border: 1px solid #3b8070;
color: #3b8070;
text-decoration: none;
padding: 10px 30px;
}
.button--green:hover {
color: #fff;
background-color: #3b8070;
}
.button--grey {
display: inline-block;
border-radius: 4px;
border: 1px solid #35495e;
color: #35495e;
text-decoration: none;
padding: 10px 30px;
margin-left: 15px;
}
.button--grey:hover {
color: #fff;
background-color: #35495e;
}
</style>
我的解决方案
<template>
<div>
<!-- Tip add css to body tag -->
<body class="max-h-[100vh] max-w-[100vw] overflow-hidden"></body>
</div>
</template>
我最近意识到，当我们创建第二个 body 标记并向其添加类时，最外面的 body 标记将具有相同的类。但我们会有多余的 body 标签。
我的猜测是因为你正在限定它的范围，vue 不针对 body 也不针对 html。它是主体内的一个元素，html 目标元素可以工作，因为它没有作用域。
如果你不想让它泄漏，有一个主要的全局CSS文件和其余的范围。
将全局样式放入
default.vue在 Nuxt 3 你会想使用这个 （参考）:
<script setup>
// pages/my-cool-page.vue or app.vue
useHead({
bodyAttrs: {
class: 'test'
}
})
</script>
<template>
<!-- omitted for brevity -->
</template>
<style>
.test {
overflow: hidden;
}
</style>