Bootstrap-vue: Document including Bootstrap CSS

[ronjouch]

The docs introduction starts with this warning:

Bootstrap Vue Does not ships with bootstrap css files. With both methods, you will still need to include Bootstrap's CSS.

To a Vue newcomer like me, it's unclear what the recommended way to do this inclusion is. (Real inclusion, for deployment reasons I cannot rely on a CDN).

• My app is based on vuejs-templates/webpack...
• ... which comes configured so that vue-style-loader (forked from style-loader) handles static CSS...
• ... and is documented by vuejs-templates/webpack in Handling Static Assets.
  
  
  
  • Reading this doc, I think I want to go for a "Real static asset", which works as expected if I copy my bootstrap.min.css in /static and reference it through a simple <link rel="stylesheet" href="static/bootstrap-4.0.0-alpha.6.min.css">...
  
  
  • ... but I don't want to copy (and track in git) the css; I already have it in node_modules/bootstrap/dist/css/bootstrap.min.css. However, the static asset handling configured by vuejs-templates/webpack won't work here :-/
  
  
• Alternatively, could/should I use an import statement in my app's <style> block?
• EDIT or would simply symlinking static/bootstrap-4.0.0-alpha.6.min.css to ../node_modules/bootstrap/dist/css/bootstrap.min.css (plus the above-mentioned <link>) be a good solution?

What do you recommend, and could we expand this doc warning?

Note: I'm aware bootstrap-vue is not the cause for my confusion, it's more the ecosystem. But could bootstrap-vue mention inclusion mechanisms for common contexts like the one provided by vuejs-templates/webpack ?

Thanks for bootstrap-vue :)

[pi0]

@ronjouch Hello and happy hearing your feedback.
Actually it would be the worst method serving static bootstrap css when building things using webpack even without using style-loader... The reason this package does not ships with bootstrap stylesheets is that we wanted to abstract structure from styles, so anyone can use his customized stylesheets and include them how ever he likes.
If you are starting your journey with vue.js i would highly recommend using nuxt.js framework which helps a LOT developing big and small projects, and adding stylesheets is as simple as including it in config (we use it for our documentation website)
BTW you mentioned you are using style-loader i think the easiest method is just by simple including bootstrap css files in your js entry-point.
I would be happy if you can share your experience with others and making online docs even better for new users.

[ronjouch]

@pi0 thanks for the fast response! I'll be glad to submit a docs Pull Request once I get a good enough grasp to say something meaningful. So, a few more questions:

it would be the worst method serving static bootstrap css when building things using webpack even without using style-loader

Can you precise what's objectively undesirable with this simple symlink-based method? I especially liked the fact that the bootstrap css ended up simply spat as /dist/static/bootstrap-4.0.0-alpha.6.min.css and was not mixed with the app's CSS. To me that was a plus, because it means more efficient network usage thanks to better cache-ability (when you push a new version of the app, clients already have the bootstrap css in cache), while letting me enforce cache busting (in case of a bootstrap update) with a simple file rename.

using style-loader, i think the easiest method is just by simple including bootstrap css files in your js entry-point.

Thanks for the tip. I added an import 'vue-style-loader!bootstrap/dist/css/bootstrap.css' to my main.js and it indeed works 👍, do you confirm it is what you meant? Note that using this method I end up with all the bootstrap css in my final css bundle, which doesn't sound desirable to me with regards to caching (see my above comment).

If you are starting your journey with vue.js i would highly recommend using nuxt.js framework which helps a LOT developing big and small projects

Eeeeh... I'm sure it's great and works for your docs site, but I've been bitten more than once in the JS world by depending on too much stuff, so I'd rather avoid meta-frameworks like this one and stick to vanilla Vue. Thanks for the tip though :)

The reason this package does not ships with bootstrap stylesheets is that we wanted to abstract structure from styles, so anyone can use his customized stylesheets and include them how ever he likes.

Awesome, I'll need custom stylesheets for my app. I may run into you about this too 😃.

[pi0]

I added an import 'vue-style-loader!bootstrap/dist/css/bootstrap.css' to my main.js and it indeed works

Yep that was what i meant.

About including separate css files, when we have more than one css dependency (not something rare) i may prefer having two separate bundles app.css and vendor.css this would reduce number of network requests and resulting in better performance. (vendor.css may not change across daily updates so cache still rocks)
When importing css you can also use a webpack plugin called Extract Text Plugin which is designed exactly to extract imported css directive into a separate bundle.
I suggest you also see webpack codesplitting css which may help you.