Chrom/Sass Sourcemaps, in Inspektor vorgenommenen Änderungen nicht in SCSS Datei gespeichert

Question

Hier ist eine kurze Zusammenfassung dessen, was ich spreche:

https://medium.com/what-i-learned-building/b4daab987fb0

Wenn mit Workspaces mit Chrome und sourcemaps einrichten und die Lokale/Netzwerk-Dateien verknüpft, kann ich den Chrome-Web-Inspektor (im Bereich Elemente -> Stile) verwenden, um den Speicherort des Selektors in der richtigen SCSS-Datei zu erkennen. Außerdem kann ich darauf klicken, in die SCSS-Datei aufgenommen werden, eine Änderung vornehmen und sie dann erfolgreich im Dateisystem speichern. Was ich jedoch vorher funktionierte, sind Änderungen in der Elemente-> Stile Panel in der SCSS-Datei aktualisiert werden (dh wenn ich eine Änderung in der Registerkarte Elemente und überprüfen Sie die SCSS-Datei in Chrome sollte es geändert haben).

Stattdessen werden die Änderungen an der CSS-Datei vorgenommen. Natürlich ist dies nicht sehr nützlich, da:

• Es wird überschrieben, sobald die SCSS Datei geändert wird
• Es bedeutet Chrome Arten zeigen, die nicht in der SCSS Datei sind, auch nach dem Neuladen, wie sie sind persistent in der CSS-Datei

gespeichert

Ich habe dies auf OSX und Windows versucht, mit Sass 3.3.6. Kann auch bestätigen, dass es sich nicht um das Problem "../" in # 9 https://code.google.com/p/chromium/issues/detail?id=273384 handelt, da sich die Sass-Datei jetzt in der CSS-Datei befindet. Es gibt auch keine style.css? Ver = x-Erweiterungen auf dem Stylesheet-Tag.

Answer 1

https://code.google.com/p/chromium/issues/detail?id=257778 ist, was Sie verlangen. Das Patchen von SCSS anstelle von CSS bei der Bearbeitung des Styles-Bereichs ist im allgemeinen Fall unmöglich (mehrdeutig), wenn Variablen oder komplexe Sprachfunktionen beteiligt sind. Am besten gehen Sie also auf Ctrl -Klicken Sie im Bereich Stile auf die gewünschte CSS-Eigenschaft Navigiere zum entsprechenden SCSS-Fragment und bearbeite SCSS-Ressourcentext, dann speichere (Ctrl + S) und lass den Sass-Compiler (der im Watch-Modus läuft) den Rest erledigen. Sie sollten die beiden Einstellungen Enable CSS source maps und Auto-reload generated CSS aktiviert haben, damit die DevTools die generierten CSS-Änderungen übernehmen können.