Skip to content

SCSS SourceMap pointing to the Parent selector only. #2826

@ggedde

Description

@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.

2016-10-22_0150

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

2016-10-22_0156

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions