如何使Webpack，Sass和源地图在多页面应用程序中运行？

Question

Here's where I'm now:

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

Then

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

And open http://example.com/dist in Chrome. Then open Developer Tools > Sources > top > webpack:// > . > 1.sass . And there you'll see css code, not sass code. devtool is for js/coffeescript/whatever, if anything. What am I doing wrong?

UPD

From what I can see, sass-loader passes file as a string . And in that case node-sass ( libsass ) doesn't return source map. But even if given file, the latter returns source map with generated css code , not sass code for some reason. Any workarounds are welcome, even if ugly.

Answer 1

Well, the issue with libsass not generating source maps for inline content seems to be taken care of . It's just that libsass returns source maps with scss code , even if given sass code. So I mistook it for css.