Using with vue-loader

[luveti]

My team is looking to implement this into our vue-loader based app and I'm having trouble getting it to work. Do you have any tips on how to get this working with vue-loader? :)

[luveti]

The issue I was having was getting the packaged bootstrap styles to show. I managed to get this to work by adding this code to the style section of my App.vue file (the first component).

@import 'node_modules/vuestrap/bootstrap/bootstrap';

Is this the recommended way of doing this?

[tvld]

As per the instructions, I started of adapting my project's webpack.dev.conf.js to autoload the bootstrap, but I failed. It was getting too confusing and I felt I lost some control. What I ended up doing was:

1 - Create a ``palette.scss` file with just variables definitions, such as :

/* Primary*/
$primaryDark: #203559;      // Cello
$primaryHighlight: #a6894c; // Driftwood

2 - I created an app.scss based on the contents of variables.scss, note the use of my pallette and the import of the bootstrap at the bottom:

@import "./palette.scss";

// *** BOOTSTRAP ADJUSTMENTS ***

$brand-primary:             $primaryDark !default;  // Cello
$brand-success:             $primaryHighlight !default; // Driftwood
// etc.

@import "../../node_modules/vuestrap/bootstrap/bootstrap.scss";

3 - in my App.vue I added require("./theme/app.scss") to include the bootstrasp overrides. Only include this file ONCE in your project:

4- if I need to use scss overrides in my components I import the pallette again in the <style> section, not the app.scss as that would load bootstrap.scss multiple times in my project...

[luveti]

Thanks for the suggestions @tvld! :)