Nuxt.js项目style scoped属性导致贪吃蛇游戏样式异常问题求助

问题根因 #

• 加scoped时蛇身不可见：
  Vue/Nuxt的scoped样式会自动给所有样式选择器添加组件独有的data-v-xxxx属性后缀，仅匹配组件模板里静态声明的元素。你通过JS动态插入的.gameBoardPixel、.snakeBodyPixel、.food类的元素没有对应属性后缀，导致样式无法命中，元素透明不可见。
• 移除scoped时跑边界+样式崩坏：

1. 你在组件内写了body选择器的样式，移除scoped后会全局生效，污染Nuxt项目的全局样式，和默认样式冲突。
2. 组件模板中错误写了<body>标签，Nuxt会自动生成根DOM结构，组件内冗余的<body>会导致页面DOM结构异常，布局计算出错。
3. 缺少盒模型声明，.gameBoardPixel的宽高计算受全局margin/padding影响，一行无法容纳40个像素块导致换行，看起来就像蛇跑出了边界。

修复方案 #

1. 修正模板结构，删除template里冗余的<body>、<meta>、<title>标签，页面元信息通过Nuxt的useHead方法声明，JS逻辑放到客户端挂载生命周期onMounted中执行，不要用window.onload：

<template>
  <div class="snake-game-wrapper">
    <div id="gameContainer"></div>
    <div id="scoreContainer">
      <div class="scoreBoard">Food: <span id="pointsEarned">0</span></div>
      <div class="scoreBoard">Blocks: <span id="blocksTravelled">0</span></div>
    </div>
    <div id="onScreenControllers">
      <button id="leftButton">◀️</button>
      <div>
        <button id="upButton">🔼</button>
        <button id="downButton">🔽</button>
      </div>
      <button id="rightButton">▶️</button>
    </div>
  </div>
</template>

<script setup>
useHead({
  title: 'Snake v8',
  meta: [
    { charset: 'UTF-8' },
    { name: 'viewport', content: 'width=device-width,initial-scale=1' }
  ]
})

onMounted(() => {
  // 把你原来写在window.onload里的所有JS代码粘贴到此处
})
</script>

2. 保留scoped样式，给动态元素的选择器加:deep()深度修饰符，同时补充盒模型声明避免布局偏差，移除组件内的body样式：

<style scoped>
:deep(.gameBoardPixel) {
    width: 1vw;
    height: 1vw;
    border-radius: 10px;
    float: left;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:deep(.snakeBodyPixel) {
    background-color: #fd6401;
    box-shadow: 0 0 5px #fd6401;
}

:deep(.food) {
    background-color: #68e768;
}

#gameContainer {
    width: 40vw;
    height: 40vw;
    margin: 2vw auto;
    background-color: #0c1021;
    border: solid 10px slategrey;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    font-size: 0;
}

#scoreContainer {
    width: 40vw;
    display: flex;
    margin: auto;
    justify-content: space-around;
}

.scoreBoard {
    border-radius: 10px;
    border: solid 5px slategrey;
    color: dimgray;
    background-color: #0c1021;
    display: inline-block;
    padding: 1vw;
    width: 40%;
    box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.6);
}

#onScreenControllers {
    display: none;
}

.developerDetails {
    margin-top: 2vw;
    display: flex;
    flex-direction: column;
    color: #0c1021;
    font-family: monospace;
}

.developerDetails a {
    color: #0c1021;
}

@media only screen and (max-width: 768px) {
    #gameContainer {
        width: 80vw;
        height: 80vw;
    }
    :deep(.gameBoardPixel) {
        width: 2vw;
        height: 2vw;
    }
    #scoreContainer {
        width: 80vw;
    }
    #onScreenControllers {
        width: 80vw;
        margin: 5vw auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    #onScreenControllers>div {
        display: flex;
        flex-direction: column;
    }
    #onScreenControllers button {
        background-color: transparent;
        height: 20vw;
        width: 20vw;
        font-size: 10vw;
        border: none;
    }
    #onScreenControllers button:focus {
        outline: none;
    }
    #onScreenControllers button:active {
        background-color: slategray;
    }
}
</style>

3. 在项目全局CSS文件中添加body样式配置，再在nuxt.config.ts中引入该全局CSS即可：

body {
    background-color: darkslategrey;
    text-align: center;
    margin: 0;
    padding: 0;
}

内容的提问来源于stack exchange，提问作者Amine