CODEWITHSUNDEEP
google-chromesassgoogle-chrome-devtools
Orry
Orry

Reputation: 277

Chrome Canary Sass debugging switches between scss files and compiled css

After setting up source maps for my scss files, and getting sass debugging up and running for canary, I'm hitting a small but frustrating snag. When I first load or reload the page and inspect an element, I get a reference to the .scss file in the Matched CSS Rules window. screenshot 1.

When I go to switch up the styles, for instance changing the background color, as soon as I'm done making the change, the file path instantly changes to the compiled css file. screenshot 2. Any ideas for why this might be happening?

Upvotes: 2

Views: 524

Answers (1)

Alexander Pavlov
Alexander Pavlov

Reputation: 32286

Indeed, when you modify the CSS, the source mapping between CSS and SCSS is broken, since it is no longer correct. To restore it, you should save the updated SCSS onto disk in the DevTools Sources panel (with sass running in the watch mode) and have DevTools reload your CSS. Then your source mapping will be fine.

Upvotes: 1

Related Questions