Source map is incorrect when outputStyle is 'compressed' #2230

x-yuri · 2016-11-21T17:25:44Z

I hope it will do if I provide you with weback setup to reproduce the issue.

package.json:

{
  "dependencies": {
    "css-loader": "^0.26.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "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');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './1.js',
    output: {
        path: 'dist',
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            {test: /\.sass$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')},
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'template.ejs',
        }),
        new ExtractTextPlugin('[name].css'),
    ],
    sassLoader: {
        outputStyle: 'compressed',
    },
    devtool: 'source-map',
};

template.ejs:

<!doctype html>
<html>
<body>

<div></div>

</body>
</html>

1.js:

require('./1.sass');

1.sass:

body
    background: #ddd

div
    width: 100px
    height: 100px
    margin: auto
    background: #666

$ npm i
$ rm -rf dist/* && ./node_modules/.bin/webpack

Then open http://example.com/dist in Chrome. Then Developer Tools > Elements tab. Then click on div element, and then on the link for div { width: 100px; ... } block, and you'll find yourself on the wrong line (line 2 instead of line 4).

If you change outputStyle to anything other then compressed, it'll work out.

version info:

$ node-sass --version
node-sass       3.13.0  (Wrapper)       [JavaScript]
libsass         3.3.6   (Sass Compiler) [C/C++]

UPD On a side note, when you've got nested rules, e.g.:

div
    width: 10px
    div
        width: 20px

Both div { width: 10px; } and div div { width: 20px; } "lead" to line 1. Regardless of output style. I'd expect inner div to "lead" to line 3. Should I report it as a separate issue?

The text was updated successfully, but these errors were encountered:

x-yuri · 2016-11-26T23:29:18Z

Closing in favor of webpack-contrib/css-loader#381

x-yuri changed the title ~~Source map is wrong when outputStyle is 'compressed'~~ Source map is incorrect when outputStyle is 'compressed' Nov 21, 2016

x-yuri closed this as completed Nov 26, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Source map is incorrect when outputStyle is 'compressed' #2230

Source map is incorrect when outputStyle is 'compressed' #2230

x-yuri commented Nov 21, 2016 •

edited by HamptonMakes

Loading

x-yuri commented Nov 26, 2016

Source map is incorrect when outputStyle is 'compressed' #2230

Source map is incorrect when outputStyle is 'compressed' #2230

Comments

x-yuri commented Nov 21, 2016 • edited by HamptonMakes Loading

x-yuri commented Nov 26, 2016

x-yuri commented Nov 21, 2016 •

edited by HamptonMakes

Loading