webpack - Webpack sass 更具体的源图

Question

我正在尝试使用 webpack 从我的 scss 文件中获取更具体的源映射。

假装我有这个example.scss

1. .parent {
2.    font-size: 10px;
3.
4.    .child {
5.        font-size: 15px;
6.    }
7. }

我正在检查<div class="child"></div>我看到这个：

.parent .child {         example.scss:1
    font-size: 15px;
}

有没有办法将它指向 example.scss:4 ？

我还在谷歌搜索，但问也无妨，因为我还没找到，对吧？:)

我的 webpack 配置：

{
    entry: function() {
        ...
    },
    output: {
        ...
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    esModule: false,
                    loaders: {
                        scss: ExtractTextPlugin.extract({
                        use: [
                            {
                                loader: 'css-loader',
                                options: {
                                    sourceMap: true,
                                    url: false,
                                },
                            },
                            {
                                loader: 'sass-loader',
                                options: {
                                    sourceMap: true,
                                    url: false,
                                },
                            }],
                            fallback: 'vue-style-loader?sourceMap',
                        }),
                    },
                },
            },
        ],
    },
    resolve: {
        ...
    },
    plugins: [new ExtractTextPlugin('../css/[name].css')],
    devtool: 'module-source-map',
}

标签： webpacksass