How to merge two lazy loaded scss files and compile them before render from JS?

Hello,

I’m trying to merge a scss file which contains sass variables in the other which is the bootstrap.scss file.

I’m lazy loading them as follows :

function loadThemeWhenChangingCompany (to, from, next) {

import(/* webpackChunkName: "`${to.params.company}`" */ 
 `./themes/scss/${to.params.company}.scss`).then(vars => {

   import('../node_modules/bootstrap/scss/bootstrap.scss').then( bootstrap => {
      next();
   })
  })
};

What happens is that both of the files are indeed injected into seperate style tags but the first one holding the variables is not merged into the second bootstrap file and thus no custom theme is being loaded…only the default bootstrap theme.

How do I solve this issue ? Are there any combination of loader that can allow me to do this ?

My goal is to

  1. To Lazy import the sass vars file
  2. Read it as text and inject it into the bootstrap.scss file
  3. Compile the new file with the injected text
  4. Include it as dependency for the project
  5. display the new bootstrap

Here is my webpack.config.js file :

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const isDevelopment = process.env.NODE_ENV === 'development'

module.exports = {
  module: {
    rules: [
    {
    test: /\.css$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: isDevelopment ? 'css/[name].[ext]' : 'css/[hash].[ext]'
        }
      },
      'extract-loader',
      'css-loader',
      'postcss-loader',
    ],
  },
  {
    test: /\.vue$/,
    loader: 'vue-loader'
  },
]
 },
 plugins: [
    // make sure to include the plugin!
        new VueLoaderPlugin()
 ]
}