Using any vue-strap component screws with our styles

[kirkbushell]

Noticed about 20 style tags being injected (for what reason, I have no idea) as soon as I try and use the typeahead in my javascript, and it's completely screwing with our own checkbox/radio styles that we already have in place. When I use the package, it makes all our checkboxes/radio buttons invisible, possibly other elements as well.

[rshakespear]

Ditto for me. Any way to resolve this?

[StygianTraveler]

Same here. Uh, no reply to this? The only component I imported is the modal, but somehow Radio.vue gets webpacked anyway, and it makes regular radio buttons invisible.

OK, with some more testing, it seems it works fine if I import the modal with: import modal from 'vue-strap/src/modal'; But not with: import { modal } from 'vue-strap'; (In which case, I guess the whole of Vue-Strap still gets imported and there are some style conflicts.)

Now, most probably related to this issue is the fact that in Radio.vue, the "scoped" attribute for the CSS is mistyped. It says <style scope> instead of <style scoped>. You'd think fixing that spelling would solve it all but... not quite.

If I import both components with import { modal, radio } from 'vue-strap';, same issue as before -- the scoped attribute is seemingly ignored. If I import the components separately, like import { modal } from 'vue-strap/src/modal'; import { radio } from 'vue-strap/src/radio'; then the styles are indeed scoped and there's no conflict. Weird? I don't know, I guess that part could be an issue with Webpack as well.

These are my findings anyway, I'll let someone who understands these things a little more figure it out.

[patrickdavey]

I also am having this issue, however, if I use the import { modal } from 'vue-strap... way of doing things, then I cannot npm run build as I get the following error:

ERROR in static/js/vendor.a8634c785340872bad41.js from UglifyJs
Unexpected token: name (NodeList) [./~/vue-strap/src/utils/NodeList.js:12,0][static/js/vendor.a8634c785340872bad41.js:31275,6]```

Just noting here in case anyone knows a way around it.

[patrickdavey]

For anyone else, I did find a way around it... alter babel-loader in build/webpack.base.conf.js to have the resolve path:

      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/vue-strap')]
      },

Worked for me anyway ;)

[Stetzon]

@StygianTraveler I had similar findings:

Either of these will inject all the styles from all of the components into the head

var accordion = require('vue-strap').accordion; // common
import { accordion } from 'vue-strap'; //es6

Vue.component('accordion', accordion); // register globally

This will only inject the styles for the accordion

import Accordion from 'vue-strap/src/Accordion.vue';
Vue.component('accordion', Accordion);

On a side note I was able to bundle up and compile all the component styles (using Laravel Mix) into my styles.css as opposed to being injected into the head by setting:

mix.options({
  extractVueStyles: true
});