Unable to view scss files while working with Ionic on dev tools

Question

I tried some very simple ionic tutorials from the Ionic website ( Ionic Tutorial ) and I want to be able to view and modify scss from dev tools.

The application functions correctly, the css classes that I added to scss files work correctly, but I see the main.css file instead of foo.css from which it was compiled. I can even view typescript files in dev tools and debug, which means the working js-> ts map works . It is css-> scss which does not work .

I see these files on www / build

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

This means that the original map is generated correctly. I also included css source maps in chrome from - DevTools -> Settings -> Sources -> Enable CSS source maps

Answer 1

I would mark this as a duplicate, but it seems like I can't. The answer can be found on this SO post enter the link description here . Basically,

You need to expand the sass.config.js file, by default the original mapping for sass is disabled.

Config / sass.config.js:

module.exports = { sourceMap: true, } 

package.json:

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

I can verify that this works.