Chrome DevTools在sourcemap中指向错误的sass文件
我使用gulp sourcemaps从SASS文件生成CSS和源MPA,我注意到有时候,当元素的Chrome DevTools在sourcemap中指向错误的sass文件,sass,google-chrome-devtools,gulp-sourcemaps,Sass,Google Chrome Devtools,Gulp Sourcemaps,我使用gulp sourcemaps从SASS文件生成CSS和源MPA,我注意到有时候,当元素的颜色定义为变量时,sourcemap指向变量的SCSS文件,而不是元素的SCSS文件 因此,例如,如果在元素中设置样式,比如说,“\u nav.scss”,并且color变量在“\u colors.scss”中定义: 该元素的CSS源映射指向Chrome的DevTools中的“colors.scss”,而不是“nav.scss”。这仅适用于少数元素。对于大多数使用color变量的元素,DevTools
颜色定义为变量时,sourcemap指向变量的SCSS文件,而不是元素的SCSS文件
因此,例如,如果在元素中设置样式,比如说,“\u nav.scss”,并且color
变量在“\u colors.scss”中定义:
该元素的CSS源映射指向Chrome的DevTools中的“colors.scss”,而不是“nav.scss”。这仅适用于少数元素。对于大多数使用color
变量的元素,DevTools仍然指向正确的SCSS文件
这是一个Chrome错误,还是生成的源代码映射有问题?您对分区使用相同的逻辑模式,还是有些逻辑模式前面有下划线,有些逻辑模式前面没有下划线?这可能会产生一个bug。我可以看到您提到的部分没有下划线前缀。所有部分前面都有下划线(已编辑原始问题),包括变量、混合等。DevTools有时也会指向混合以及变量,而不是正确的(父)部分。
.navigation-top a {
font-weight: 600;
color: $color__topnav-text;
transition: color 0.2s;
}