UI Library styles not loading in Web Components

I have a npm packaged shared component library that I have installed in my app. I import the components in the script block and register them just like any other component. The library is basically a wrapper around boostrap-vue with addititonal theming. When I target web components for the build it does not embed any of the component library styles and I’m not sure why. I have similar components with style blocks that are in my app that I can import and have the styles embedded into the js file.

I’m guessing this is a vue loader issue more so then the vue cli but I’m not sure how to troubleshoot this. Any thoughts?

Hi

If you uses bootstrap-vue you need to both install bootstrap-vue and bootstrap

# With npm
npm install vue bootstrap-vue bootstrap

# With yarn
yarn add vue bootstrap-vue bootstrap

and then include the library and the css for bootstrap and bootstrap-vue

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

ah ok thanks. I have those installed within my component library, are you saying I will need them in the main.js for my app? I’m also curious as to why web components would require this compared to the standard build which will bring in all the styles from the library. I was expecting all the styles to be added into the shadow dom I guess.

I’m not really sure. Try if it makes any difference