如何在Vue Loader中创建多个CSS文件

Question

我正在尝试使用webpack 4创建多个主题CSS文件。对于全局的Sass文件，我使用多个入口点。简化的代码如下。

// dark-theme.scss
$bgcolor:black;

@import './global.scss';

// light-theme.scss
$bgcolor:white;

@import './global.scss';

// global.scss
* {
   background: $bgcolor !important;
}

// webpack.config.js
module.exports = {
   ...
   entry: {
        app: './index.js',
        'dark-theme': './scss/dark-theme.scss',
        'light-theme': './scss/light-theme.scss',
    },
   module: {
        rules: [
              {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    'css-loader',
                    'sass-loader',
                    //How can I import two theme scss parallelly
                    {
                          loader: 'sass-resources-loader',
                          options: {
                             resources: [path.resolve(__dirname,'./src/scss/dark-theme.scss')]
                                   }
                         ]
              },
        ]
    }
}

现在，关键是我该如何解决.vue文件中的此问题。如

// a.vue
<template>
   <div id="app">
      ...
   </div>
</template>
<script>
   ...
</script>
<style lang="scss">
#app {
   background: $bgcolor;
}
</style>