nuxt.js和bulma - 如何自定义css

Question

我对vue.js，nuxt.js和bulma都很陌生，我试图简单地定制样式。

我已经创建了一个新的nuxt.js项目，并使用https://buefy.github.io/#/documentation/start添加了bulma，我试图将背景图片设置为hero。

这是我的index.vue页面：

<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>
//in custom CSS you need to add
.bg-img {
    background-image: url(~/assets/autumn-tree-5k-new.jpg) ;
    background-color: red;
    background-position: center center;
    background-repeat:  no-repeat;
    background-attachment: fixed;
    background-size:  cover;
    background-color: #999;
}
</style>

但是，当我在浏览器中查看该网站时，bg-img类没有CSS样式。