Nuxt.js与Bulma自定义CSS问题：bg-img样式不生效

嘿，我来帮你搞定这个问题！你遇到的情况主要是scoped样式的作用域限制导致自定义的.bg-img样式没有正确应用到Hero组件上，下面给你两种可行的解决方案：

方案一：使用深度选择器穿透Scoped样式 #

当你给<style>加上scoped属性后，Vue会自动为当前组件内的元素添加一个唯一的data-v-xxx属性，并且你的样式规则会带上这个属性选择器，以此实现样式隔离。但这也会导致你的自定义样式权重可能比Bulma的全局.hero样式更低，无法生效。

你可以用::v-deep深度选择器来突破这个限制，修改你的样式代码如下：

<template>
  <section class="hero bg-img">
    <div class="hero-body">
      <div class="container">
        <h1 class="title"> Hero title </h1>
        <h2 class="subtitle"> Hero subtitle </h2>
      </div>
    </div>
  </section>
</template>

<style scoped>
::v-deep .bg-img {
  background-image: url(~/assets/autumn-tree-5k-new.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #999; /* 去掉了重复的red背景色，避免冗余 */
}
</style>

::v-deep会让你的样式规则跳过scoped的属性限制，直接作用到目标元素上，这样就能确保自定义样式覆盖Bulma的默认样式。

方案二：将样式放到全局样式文件中 #

如果你希望这个.bg-img样式能在整个项目中复用，也可以把它写到全局样式文件里：

1. 在项目的assets/css目录下创建main.css（如果没有这个目录就新建一个），然后写入样式：

.bg-img {
  background-image: url('../assets/autumn-tree-5k-new.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #999;
}

2. 在nuxt.config.js中配置引入这个全局样式：

export default {
  // ...其他配置
  css: [
    '@/assets/css/main.css'
  ]
}

这样全局样式会被加载到整个项目中，自然能正确作用到Hero组件上。

另外提醒一下：你原来的样式里写了两次background-color，后面的#999会覆盖前面的red，建议去掉重复的代码哦～

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