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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions