为什么Vue Web组件样式不起作用？

Question

我是Vue的新手，我用Vue和Buefy构建了一个纸牌游戏，其中包含4个组件，每个组件都有自己的样式和功能。我希望将我的整个应用程序构建到一个Web组件中（因为它将被嵌入到多个页面中）。

预期行为

vue-cli-service build --target wc --name card-game ./src/App.vue应用我所有的自定义样式和Buefy样式，就像npm run serve和npm run build等其他命令一样。

Buefy and custom styles working (ie: responsivity, modal css, etc)

当前行为

vue-cli-service build --target wc --name my-component ./src/App.vue应用某些样式，而其他样式不应用。

Styles not working

基本文件夹结构

MyApp
└── src
    ├── assets
    ├── components
    │   └── Card.vue
    │   └── CardModal.vue
    │   └── CardCollapse.vue
    │   └── Deck.vue
    └── App.vue

App.vue

<template>
    
  <section class="section">

      <Deck/>

  </section>

</template>

<script>
  
  import Deck from './Deck';

  export default {

    name: 'CardGame',
      components: {
            
        Deck

      }
  
    }

</script>

<style lang="scss">

  //In App.vue styles i have all my global styles/utils which i use in other components

  //Importing font and buefy
  @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
  @import "~buefy/src/scss/buefy-build";

  //My utils
  ....

</style>