How to dynamically lazy load SCSS files in Vue.js? - vue.js

Question

I'm lazy loading 2 SCSS files.
The first file contains variables and the second one is the bootstrap SCSS file. My goal is to display different colors (meaning importing a different SCSS variables file) for each route depending on a URL parameter.
I've tried implementing the same solution as here since what I'm trying to do is some sort of dynamic theming: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/105 but something is missing. To be more precise the first file in not rendered to the style tag of the HTML page (only the comment it holds but no actual CSS).
What follows is the header of the scss file which inded displayed after the bootstrap file but is empty :
/**
* Set Bootstrap vars
*/
Here is my webpack configuration :
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// Replaced for sas-ressources-lodaer
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
{
loader: 'file-loader',
options: {
name: 'css/[name].[ext]'
}
},
'extract-loader',
'css-loader',
'postcss-loader'
],
},
{
test: /\.css$/,
use: [
{ loader: 'vue-style-loader' },
{ loader: 'css-loader', options: { sourceMap: true } },
]
},
{
test: /\.scss$/,
use: [
{ loader: 'vue-style-loader' },
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } },
{ loader: 'sass-resources-loader',
options: {
sourceMap: true,
resources: [
'src/themes/default.scss',
'node_modules/bootstrap/scss/bootstrap.scss'
]
}
}
]
}
]
},
plugins: [
// make sure to include the plugin!
new VueLoaderPlugin()
]
}
and here is the lazy import ina navigation guard on every route :
function loadThemeWhenChangingCompany (to, from, next) {
console.log('./themes/default.scss')
import('./themes/' + to.params.company + '.scss').then(vars => {
import('../node_modules/bootstrap/scss/bootstrap.scss').then( bootstrap => {
next();
})
})
};
In the default.scss I'm having violet colors but the interface shows the primary blue default color. I'm expecting to have a violet color which as specified in the default.scss file.