How to make webpack, sass and source maps go along in a multi page app?

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.

Try `devtool: 'source-map'` and sourceMap query on sass loader too: `loaders: ['style', 'css?sourceMap', 'sass?sourceMap']` — jal, Nov 20 '16 at 20:43
@jali-ai [That's](https://github.com/jtangelder/sass-loader/blob/d894345/index.js#L289) how you pass map to the next loader, but `css-loader` [doesn't pass](https://github.com/webpack/css-loader/blob/5651d70/lib/loader.js#L116-L122) it further. Css source maps are independent of js ones. As for `sourceMap` parameter, after looking into `sass-loader`'s code, `sourceMap` parameter indeed does something, but it doesn't work nevertheless. And yeah, I checked it with your correction. To no avail :( If there were some kind of workaround, even if ugly... — x-yuri, Nov 20 '16 at 22:31
Actually it maps to the equivalent `scss` code of the `sass` file. So it's working in a way but not quite exactly the way you expect. If you use a variable or something that makes a different between css and scss you can see it. — jal, Nov 20 '16 at 23:25
I just pointed out something to notice. I think you can provide more useful information you gathered through your search, as an answer. — jal, Nov 21 '16 at 00:34

score 0 · Accepted Answer · answered Nov 21 '16 at 13:37

0

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.

answered Nov 21 '16 at 13:37

x-yuri

16,722
15
114
161

How to make webpack, sass and source maps go along in a multi page app?

1 Answers1