SCSS源图不能与Webpack 3 + ExtractTextPlugin一起使用

Question

我正在尝试在我的应用中为我的SCSS启用源图，并且在我的手上有一个非常令人费解的情况。这是我的配置文件：

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssets = require('optimize-css-assets-webpack-plugin');

let config = {
	entry: './src/index.ts',
	devtool: 'eval-source-map', // for choosing a style of source map
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, './dist')
	},
	devServer: {
		contentBase: path.resolve(__dirname, './dist'), // A directory or URL to serve HTML content from
		historyApiFallback: true, // fallback to /index.html for SPA
		inline: true,
		open: false // open default browser on launch
	},
	module: {
		rules: [
			{
				test: /\.ts$/, // files ending with .ts
				exclude: /node_modules/, // exclude the node modules directory
				use: 'ts-loader'
			},
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: "babel-loader",
					options: {
						presets: ["env"]
					}
				}
			},
			{
				test: /\.scss$/, // files ending with .scss
				use: ['css-hot-loader'].concat(
					ExtractTextPlugin.extract({
						fallback: 'style-loader',
						use: [
							// { loader: 'style-loader', options: { sourceMap: true } },
							{ loader: 'css-loader', options: { sourceMap: true } },
							{ loader: 'postcss-loader', options: { sourceMap: true } },
							{ loader: 'sass-loader', options: { sourceMap: true } },
						],
					})
				)
			},
			{
				test: /\.(png|svg|jpg|gif)$/, // for other file types
				use: ['file-loader?name=[name].[ext]&outputPath=img/']
			}
		]
	},
	resolve: {
		extensions: ['.ts', '.js']
	},
	plugins: [
		new webpack.ProvidePlugin({
			$: 'jquery',
			jQuery: 'jquery'
		}),
		new ExtractTextPlugin('styles.css') // call the ExtractTextPlugin and name our CSS file
	]
};

module.exports = config;

if (process.env.NODE_ENV === 'production') {
	module.exports.plugins.push(
		new webpack.optimize.UglifyJsPlugin(), // call the uglify plugin
		new OptimizeCSSAssets() // call the CSS optimizer (for minification)
	);
}

真正奇怪的是，终端中的所有内容编译都很好但是当我检查一个元素时，没有源图：

但是，如果在我的webpack.config文件中取消注释这一行：

// { loader: 'style-loader', options: { sourceMap: true } },

再次运行npm start，源图正常工作！...

...但是现在终端抛出了一个错误，这显然是因为you aren't supposed to use style-loader inside of the ExtractTextPlugin, but rather only as a fallback.我的应用程序在这种情况下仍然有用，但我不想要这个错误！如何在不使用SCSS规则中的样式加载器的情况下启用SCSS源映射？