x-yuri x-yuri - 12 days ago 4
Javascript Question

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

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
dist/index.html
in Chrome. Then open
Developer Tools
>
Sources
>
top
>
webpack://
>
.
>
1.sass
. And there you'll see css code, not sass code.
devtool: 'eval-source-map'
is for js/coffeescript/whatever. 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

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.

Comments