源码地图Sass与Webpack（2）

Question

我使用Webpack 2构建我的Angular（4）应用程序。我有它工作，但我想弄清楚如何为我的scss生成源图。在我的组件中，我使用styleUrls加载我的scss添加options: { sourceMap: true }不起作用。我不想提取组件的样式，因为ViewEncapsulation不再起作用了。我使用的.global.scss到处都是需要的，所以我提取这些并且这部分工作正常。有人可以告诉我如何生成我的源图（甚至可以使用Angular）？下面是我的webpack.config.js。

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const autoprefixer = require('autoprefixer');
const path = require('path');

module.exports = {
    devtool: 'inline-source-map',
    devServer: {
        port: 3000,
        contentBase: '/www',
        inline: true
    },
    entry: {
        polyfills: './src/polyfills.ts',
        vendor: './src/vendor.ts',
        app: './src/bootstrap.ts'
    },
    output: {
        path: path.join(__dirname, '../www/'),
        filename: '[name].bundle.js'
    },
    resolve: {
        modules: [ path.join(__dirname, 'node_modules') ],
        extensions: ['.js', '.ts', '.html']
    },
    module: {
        loaders: [{
            test: /\.ts$/,
            exclude: /node_modules/,
            use: ['awesome-typescript-loader', 'angular2-template-loader']
        }, {
            test: /\.html$/,
            use: 'html-loader'
        },{
            test: /\.global\.scss$/,
            use:  ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use:[{
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    }, {
                        loader: 'postcss-loader'
                    }, {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        }
                    }]
                }),
        }, {
            test: /\.scss$/,
            use:  [ {
                loader: "raw-loader"
            }, {
                loader: 'resolve-url-loader'
            }, {
                loader: 'postcss-loader'
            }, {
                loader: "sass-loader", options: {
                    sourceMap: true
                }
            }],
            exclude: /node_modules/
        }, {
            test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
            use: 'url-loader'
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new ExtractTextPlugin('global-styles.css'),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'polyfills',
            chunks: ['polyfills']
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            chunks: ['vendor']
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['polyfills', 'vendor'].reverse()
        })
    ]
};