Webpack-从SCSS复制CSS在模板上的位置

Question

我想将内联css从scss文件复制到模板上的定义位置。

我的文件夹/文件结构

• dist
• src
  user-card.html
  user-card.js
  user-card.scss

我的模板
src / user-card.html

<template>
    <!-- css content -->
    <div class="card__user-card-container">
        <h2 class="card__name">
            <span class="card__full-name"></span> (
            <span class="card__user-name"></span>)
        </h2>            
        <button class="card__details-btn">More Details</button>
    </div>
</template>
<!-- js content -->

捆绑操作后的外观
dist / user-card.html

<template>
    <style>.card__user-card-container{color:green}; ...</style>
    <div class="card__user-card-container">
        <h2 class="card__name">
            <span class="card__full-name"></span> (
            <span class="card__user-name"></span>)
        </h2>           
        <button class="card__details-btn">More Details</button>
    </div>
</template>
<script type="text/javascript">!function(e){var t={};function n(r){} ...</script>  

  

我已经解决了带有js内容的部分，但是我不知道如何将CSS内容添加到正确的位置。也许用webpack无法实现？

我的webpack.config.js

const config = {
    entry: {
        'ing-uic-searchbar': './src/user-card.js'
    },
    output: {
        filename: '[name].js',
        path: path.join(__dirname, '../dist')
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                            minimize: true
                        }
                    },
                    {loader: 'sass-loader'}
                ],
            },        ],
    },
    plugins: [
        new UglifyJSPlugin(),
        new HtmlWebpackPlugin({
            template: './user-card.html',
            filename: 'user-card.html',
            inlineSource: '.js$',
        }),
        new HtmlWebpackInlineSourcePlugin(),

    ]
};

我也玩过 extract-text-webpack-plugin ，但没有结果。也许有人可以帮忙吗？