导出的Vue Web组件未使用boostrap

如何解决导出的Vue Web组件未使用boostrap

我必须为大型Web项目创建一个Vue Web组件。并希望将其用作自定义HTML元素。 组件和Web项目使用Bootstrap进行样式设置。 我在组件和主Web项目中导入Bootstrap。

但是当我构建它并将.js导入到我的Main Project中时，组件没有被引导。

component.vue

<template>
  <div >
   <button type="button" class="btn btn-primary">weiter</button>
 
  </div>
</template>

<script>
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

export default {
  name: 'HelloWorld',props: {
    msg: String
  },}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

package.json

    {
  "name": "test","version": "0.1.0","private": true,"scripts": {
    "serve": "vue-cli-service serve","build": "vue-cli-service build","web-component": "vue-cli-service build --inline-vue --target wc --name test-02","web-async": "vue-cli-service build --name test-02 --target wc-async 'src/components/*.vue'"
  },"dependencies": {
    "axios": "^0.19.2","bootstrap": "^4.5.2","core-js": "^3.6.5","jquery": "^3.5.1","popper.js": "^1.16.1","vue": "^2.6.11"
  },"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.14.0","@vue/cli-plugin-babel": "~4.5.0","@vue/cli-service": "~4.5.0","less": "^3.0.4","less-loader": "^5.0.0","vue-template-compiler": "^2.6.11"
  },"browserslist": [
    "> 1%","last 2 versions","not dead"
  ]
}