Scss-Dateien können während der Arbeit mit Ionic auf Dev-Tools nicht angezeigt werden

Question

Ich versuche einige sehr grundlegende Ionic-Tutorials von Ionic Website (Ionic Tutorial), und ich möchte scss von Dev-Tools anzeigen und ändern können.

Die App funktioniert korrekt, CSS-Klassen, die ich in scss-Dateien hinzugefügt habe, funktionieren auch korrekt, aber ich sehe eine main.css-Datei anstelle der foo.css, aus der sie kompiliert wurde. Ich kann sogar Typoskript-Dateien auf Dev-Tools anzeigen und debuggen, was bedeutet, Quellkarte für js-> ts arbeitet. Es ist die CSS-> scss, die nicht funktioniert.

kann ich diese Dateien auf www sehen/

• main.js
• main.map.js
• main.css
• main.map.css

bauen Dies bedeutet, dass die Quellkarte korrekt generiert wird. Ich habe auch CSS-Source-Karten in Chrom von aktiviert - DevTools -> Einstellungen -> Quellen -> CSS Quelle aktivieren Karten

Answer 1

Ich würde dies als Duplikat markieren, aber es scheint, wie ich kann nicht. Antwort kann auf diesem SO Post enter link description here gefunden werden. Grundsätzlich

Sie müssen Ihre Datei sass.config.js erweitern, standardmäßig Quellmapping für Sass ist deaktiviert.

config/sass.config.js:

module.exports = { 
    sourceMap: true, 
} 

package.json:

"config": { 
    "ionic_sass": "./config/sass.config.js", 
} 

Ich kann bestätigen, dass das funktioniert.