Chrome DevTools points to wrong sass file in sourcemap

Viewed 561

I generate my CSS and Source Mpas from SASS files using gulp-sourcemaps and I have noticed that sometimes, when an element has a color defined as a variable, the sourcemap points to the variable's SCSS file, rather than the element's SCSS file.

So if, for example, an element is styled in, let's say, "_nav.scss" and the color variable is defined in "_colors.scss":

.navigation-top a {
    font-weight: 600;
    color: $color__topnav-text;
    transition: color 0.2s;
}

The CSS Source Map for this element points to "colors.scss" in Chrome's DevTools instead of "nav.scss". This is the case only for a few elements. DevTools still points to the correct SCSS file for most elements, which use color variables.

Is this a Chrome bug, or is there a problem with the generated Source Map?

0 Answers
Related