带有sourcemap and和devtool的Webpack sass-loader

Question

嗨，我是新来的Webpack。

我通过源映射的cmd参数寻找在dev和prod模式之间切换的解决方案。

Webpack生来就有

webpack --devtool eval

但是这个命令会被sass-loader (https://github.com/jtangelder/sass-loader)忽略

根据sass-loader页面上的描述，需要在配置文件中写入sourcemaps修复的选项：

module.exports = {
    ...
    devtool: "source-map",
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loaders: ["style", "css?sourceMap", "sass?sourceMap"]
            }
        ]
    }
};

有什么解决方案可以通过命令行对其进行配置吗？

Answer 1

我能够使用需要node-sass和webpack作为对等依赖的sass-loader，并通过使用extract-text-webpack-plugin解决了这个问题

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

module.exports = {
    ...
    devtool: "source-map",
    module: {
        loaders: [
            {test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css')},
            {test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')}
        ]
    },
    plugins: [
        new ExtractTextPlugin('[name].css')
    ],
};

有关工作示例，请查看test/sourceMap。希望这能有所帮助！