如何在Vue.js中动态延迟加载SCSS文件？

Question

我很懒地加载2个SCSS文件。

第一个文件包含变量，第二个文件是引导SCSS文件。我的目标是根据URL参数为每个路由显示不同的颜色（表示导入不同的SCSS变量文件）。

我尝试实现与此处相同的解决方案，因为我试图做的是某种动态主题：https://github.com/webpack-contrib/mini-css-extract-plugin/issues/105，但是缺少一些东西。更准确地说，第一个文件未呈现到HTML页面的样式标签中（仅包含它的注释，而没有实际的CSS）。

以下是scss文件的标头，该标头显示为在引导文件之后显示，但为空：

/**
 * Set Bootstrap vars
 */

这是我的webpack配置：

// 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()
  ]
}

这是每条路线上的懒惰导入导航导航：

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();
    })
  })
};

在default.scss中，我有紫罗兰色，但是界面显示了主要的蓝色默认颜色。我期望具有default.scss文件中指定的紫色。