SCSS SourceMap pointing to the Parent selector only.

[ggedde]

Mac OSX (El Capitan?)
angular-cli: 1.0.0-beta.18
node: 6.7.0

When running 'ng serve' or 'ng build' the SCSS SourceMaps only point to the Parent selector and not the correct selector.

But as you can see it is not pointing to the correct selector. It should be pointing to line 13 not line 5.

This seems to be related more towards angular-cli and webpack as running the node-sass cli works fine and points to line 13
node-sass --source-map true src/styles.scss > styles.css

I have tried changing devtool to 'source-map' in
/node_modules/angular-cli/models/webpack-build-development.js
And still no luck.

PS in order to get SourceMaps to work I needed to add ?sourceMap to the css and sass loaders in
/node_modules/angular-cli/models/webpack-build-common.js
Also I needed to update angular-cli: 1.0.0-beta.17 to angular-cli: 1.0.0-beta.18

Here is my loader configurations in
/node_modules/angular-cli/models/webpack-build-common.js

// in main, load css as raw text
{
exclude: styles,
test: /.css$/,
loaders: ['raw-loader', 'postcss-loader']
}, {
exclude: styles,
test: /.styl$/,
loaders: ['raw-loader', 'postcss-loader', 'stylus-loader'] },
{
exclude: styles,
test: /.less$/,
loaders: ['raw-loader', 'postcss-loader', 'less-loader']
}, {
exclude: styles,
test: /.scss$|.sass$/,
loaders: ['raw-loader', 'postcss-loader', 'sass-loader?sourceMap']
},
// outside of main, load it via style-loader
{
include: styles,
test: /.css$/,
loaders: ['style-loader', 'css-loader', 'postcss-loader']
}, {
include: styles,
test: /.styl$/,
loaders: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader']
}, {
include: styles,
test: /.less$/,
loaders: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
}, {
include: styles,
test: /.scss$|.sass$/,
loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap']
}

I tried removing 'postcss-loader' and also rearranging the loaders, but still no luck.

I am thinking that maybe one of the loaders is running before the sass source-maps is running and getting the incorrect or compressing the css before it runs the source map, but I am not sure.

Any Help?

Thanks

[mikeumus]

+1 on this issue.

Hey @geoff-gedde, some of us are having this same issue in Stack Overflow, see:

• How to Source Map Angular CLI CSS files in Chrome Dev Tools?

Except I don't even get a styles.scss just inline <style>...</style> but I'll read your issue here again tomorrow and try to get at least to where you're at and then edit this part out. Cheers!

[ggedde]

The code is still inline, but because the source-map is running it will point to the source of the inline css which is styles.scss.

[ggedde]

Looks like this issue is more related to Webpack then angular-cli as it also happens on vuejs 2.0 with webpack. This also may be related to using the style loader instead of loading the file. I will be testing some more.

[ggedde]

Not sure why this was closed.
Are you suggesting that if you want Source Maps to work correctly that it will not work correctly with angular-cli and you that need to be using static files?

Using static files is not a fix, but a work-around.

I tried using "extract-text-webpack-plugin" instead of 'style-loader' to make the css an external file which works great to make the css files separate so they are cached, but the source map is still not pointing to the correct selector. So it is not related to 'style-loader'. This makes me think that the issue is related to sass-loader.

Yes,
If I use node-sass --watch everything is fine, but I don't like the idea of running 'ng serve' and 'node-sass --watch' as separate tasks.

I will file an issue with sass-loader though.

[ggedde]

Posted on sass-loader here:
webpack-contrib/sass-loader#272

[filipesilva]

@ggedde the PR that closed this issue (#2646), added, among other things, sourcemap support to the CSS pipeline (https://github.com/angular/angular-cli/pull/2646/files#diff-d85c71bf928fadd8cda87cb456e03d30R8).

I believe that has fixed this issue. The change isn't released yet, it should be out in the next release. If this isn't fixed then I'm happy to reopen and investigate more.

[Canos]

Updates: I have managed to have sourcemaps in beta 20-4

The codebase is still failing in devel but removing style-loader, from the cssLoader array and adding ExtractTextPlugin.extract to loaders, solve the problem:
https://gist.github.com/Canos/ec7fba011c989881562c97a14d0a192d

Also seems beta 20.4 solved the misspointing line.

[nadhir-falta]

@ggedde were you able to get this to work for you ?