Webpack Sass更具体的源映射

时间:2018-10-04 14:48:00

标签: webpack sass

我正在尝试使用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',
}

0 个答案:

没有答案