Angular-cli: 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:
https://github.com/jtangelder/sass-loader/issues/272

[filipesilva]

@ggedde the PR that closed this issue (https://github.com/angular/angular-cli/pull/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 ?

[ggedde]

Sorry @nadhir-falta, I took a pause from this project.
Nope, the issue still exists for me. I also just recently installed brand new ng-cli on a new laptop.
Angular4.0 with CLI 1.0.2

I am still getting this issue.
This also happens with ng serve --extract-css

jhnns from sass-loader has confirmed that it is happening on sass-loader.
https://github.com/webpack-contrib/sass-loader/issues/272

So I am not sure where the issue is exactly coming from and not sure what I can do to help out.

[Koziuk-S]

When you type ng serve by default angular cli doesn't include sourcemaps files for css files but you can include it by typing this command

ng serve -sm -ec

or

ng serve --sourcemap --extractCss

I use Angular Cli -v 1.0.3, and More information - Angular CLI special cases

[ggedde]

Yes @Koziuk-S I have been using both those tags.

[ggedde]

I did find a partial solution.
I think css-loader expects sass-loader to be compressed, but it is not by default.
if you add:
outputStyle: 'compressed',
To the sass-loader [options] in node_modules/@angular/cli/models/webpack-configs/styles.js
Then it works fine in Chrome, but not Firefox. (that might be a separate FF bug)

@filipesilva I think a quick solution for Chrome would be to add outputStyle: 'compressed',
To the sass-loader [options] in node_modules/@angular/cli/models/webpack-configs/styles.js

Thanks

[filipesilva]

@ggedde is the repro you posted originally still valid for the issue you're still experiencing? Reading through https://github.com/webpack-contrib/sass-loader/issues/272#issuecomment-326732443 it seems like your fix will break sourcemaps in firefox, so I don't think that's a good solution. https://github.com/postcss/postcss/issues/926#issuecomment-294062807 indicates that this problem will be fixed at some point though.

[ggedde]

@filipesilva
Yes, The Repo is https://github.com/ggedde/ngtest.
I wouldn't call it a fix, but a work around until postcss or css-loader makes an update. Yes, the issue still exists on Firefox even after the workaround, but at least it would work for everyone on Chrome and Safari. Plus I did add bug for it on FireFox bugzilla.
https://bugzilla.mozilla.org/show_bug.cgi?id=1364232

Firefox's bug is not related to sass-loader. It is just related to how node-sass compiles the sourcemap.

So I think making the change to the sass-loader [options] in node_modules/@angular/cli/models/webpack-configs/styles.js is still valid.

Thanks

[ShaggyDude]

ng serve --sourcemap --extractCss

This info should be published somewhere if it is not.

[clydin]

Closing this as sourcemap support has been greatly improved in 6.x and further in the upcoming 7.0 (currently in release candidate). If problems are still occurring with the latest versions, please open a new issue detailing the version and environment information. Thank you.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}