Ionic 5 vue 3 无法将背景图片添加到 <ion-content>

Question

嗨，黑客和帅哥：
关注这篇文章Ionic full screen background image。我猜是vue特有的bug。

代码：

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 语言