Webpack 4 SASS / BrowserSyncPlugin源映射问题

Question

我将webpack 4和sass loader与Browser Sync Plugin结合使用时遇到特定问题。问题在于，使用这种配置，我只能从main.css文件中获取源映射代码，而不能从.scss文件中获取源映射代码。另外，当我更改.scss文件中的某些代码时，它将进行更改，但即使main.css源映射也将更改为

  

main.css？browsersync = 1530085485983

我的webpack文件看起来像这样

const path = require("path");
const webpack = require('webpack');
const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
    entry: [
        'webpack-dev-server/client?https://cl2.xxxx.nl:9000/',
        'webpack/hot/only-dev-server',
        path.join(__dirname, '../src/main.js')
    ],
    mode: "development",
    output: {
        filename: "[name]-bundle.js",
        path: path.resolve(__dirname, "../dist"),
        publicPath: "/wp-content/themes/xxxxx/assets/dist"
    },
    devServer: {
        contentBase: 'dist'
    },
    module: {
        rules: [
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "/fonts/[name].[ext]"
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                use: [
                    {
                        loader: "babel-loader"
                    }
                ],
                exclude: /node_modules/
            },
            {
                test: /\.scss/,
                use: [
                    {
                        loader: MiniCSSExtractPlugin.loader
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(jpg|jpeg|gif|png)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "images/[name].[ext]"
                        }
                    }
                ]
            }
        ]
    },
    devtool: "source-map",
    plugins: [
        new MiniCSSExtractPlugin(),
        new BrowserSyncPlugin(
            {
                proxy: 'https://xxxxx.nl',
                port: 9000,
                host: 'xxxxx.nl',
                open: 'external',
                injectCss: true,
                files: [
                    './dist/*.css'
                ]
            },
            {
                reload: false
            }
        ),
        new webpack.HotModuleReplacementPlugin()
    ],
    watchOptions: {
        ignored: ['node_modules']
    }
};

启动脚本如下：

"start": "rm -rf dist/ && webpack -d --watch --info-verbosity verbose --config=config/webpack.dev.js",

编辑：我发现BrowserSyncPlugin导致了这种情况的发生，但是我不知道该如何处理或webpack开发服务器来实现该目的。我需要使用此配置，因为我无法使用localhost，由于项目具有特定的docker设置，因此我必须代理此URL。