如何使Webpack，Sass和源地圖在多頁面應用程序中運行？

Question

這是我現在的位置：

package.json ：

{
  "dependencies": {
    "css-loader": "^0.26.0",
    "html-webpack-plugin": "^2.24.1",
    "node-sass": "^3.13.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3"
  }
}

webpack.config.js ：

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './1.js',
    output: {
        path: 'dist',
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            {test: /\.sass$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']},
        ]
    },
    plugins: [
        new HtmlWebpackPlugin,
    ],
};

1.js ：

require('./1.sass');

1.sass ：

body
    background: #ddd

然后

$ rm -f dist/* && ./node_modules/.bin/webpack

然后在Chrome中打開http://example.com/dist 。 然后打開Developer Tools > Sources > top > webpack:// > . > 1. 1.sass 。 在這里，您會看到CSS代碼，而不是SASS代碼。 devtool適用於js / coffeescript /（無論如何）。 我究竟做錯了什么？

UPD

從我可以看到， sass-loader將文件作為字符串傳遞。 在這種情況下， node-sass （ libsass ）不返回源映射。 但是即使給定文件，由於某種原因，后者也會返回帶有生成的css代碼而不是sass代碼的源映射。 任何變通方法都可以接受，即使很難看。

Answer 1

好了，這個問題libsass不產生源地圖內嵌的內容似乎是照顧 。 只是libsass返回帶有scss代碼的源映射，即使給出了sass代碼也是如此。 所以我誤認為它的CSS。