Ionic5 vue3 无法将背景图片添加到<ion-content></ion-content>

Question

嗨黑客和帅哥：
按照这篇文章离子全屏背景图片。我猜这是vue特定的错误。

代码：

background_image_sample.vue

<template>
  <ion-page>
    <ion-content>
      <h1>background_image_sample Page2</h1>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonPage, IonContent } from "@ionic/vue";
import './background_image_sample.css';

export default {
  components: {
    IonPage,
    IonContent,
  },
};
</script>

background_image_sample.css

ion-content {
  --background: url('./assets/background.png') 0 0/100% 100% no-repeat
}

云环境： codesandbox

Answer 1

而不是将它导入script标签，你应该把它放在样式标签上

<style src="./background_image_sample.css"></style>或

<style lang="scss" scoped>
 @import "./background_image_sample.css";
</style>

我不太确定@import可能仅适用于sass/scss语言