van_folmert van_folmert - 20 days ago 12
Sass (Sass) Question

extract-text-webpack-plugin - extracting scss results in no mapping in main.css.map

I've managed to extract 2 scss files into 1 css file, but I've noticed the source and mappings in

main.css.map
are empty:

{"version":3,"sources":[],"names":[],"mappings":"","file":"./main.css","sourceRoot":""}



My
webpack.config.js
:

var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
devtool: 'source-map',
module: {
loaders: [
{test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000'},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(['css', 'sass'])
}
}
]
},

entry: [
'./static/js/app.js'
],

output: {
filename: './static/js/bundle.js'
},

watch: false,

plugins: [
new ExtractTextPlugin("./main.css")
]
};



My
app.js
:

var $ = require('jquery');
window.jQuery = $;
window.$ = $;
require('bootstrap-loader');

module.exports = (function () {
alert('IT WORKS!');
});

window.app = module.exports;

require('./../css/main.scss');
require('./../css/main2.scss');



webpack
's output from terminal:

Hash: 28bc2c1ea9d333be2975
Version: webpack 1.13.3
Time: 3500ms
Asset Size Chunks Chunk Names
89889688147bd7575d6327160d64e760.svg 109 kB [emitted]
./static/js/bundle.js 666 kB 0 [emitted] main
./main.css 126 kB 0 [emitted] main
./static/js/bundle.js.map 813 kB 0 [emitted] main
./main.css.map 87 bytes 0 [emitted] main
[0] multi main 28 bytes {0} [built]
[1] ./static/js/app.js 287 bytes {0} [built]
+ 29 hidden modules
Child extract-text-webpack-plugin:
+ 4 hidden modules
Child extract-text-webpack-plugin:
+ 4 hidden modules


As you can see
main.css
is generated along with
main.map.css
, but at this point it's pretty useless, because inside there is no mapping at all.

Answer

Finally, after struggling with numerous combinations, I figured it out. Syntax for using these css loaders can give a headache and apparently was changed as webpack evolved, because some older examples that work for others oddly didn't work for me.

Despite already having devtools: 'source-map' option I also needed to change loaders from:

{ 
    test:   /\.scss$/,
    loader: ExtractTextPlugin.extract(['css', 'sass'])
}

into:

{
    test:   /\.scss$/,
    loader: ExtractTextPlugin.extract(['css-loader?sourceMap', 'sass-loader?sourceMap'])
}

and thanks to this inspecting my css file in Dev Tools is correctly pointing to both scss files now.