Cannot view scss files while working with Ionic on dev tools

Question

I'm trying out some very basic Ionic tutorials from Ionic website (Ionic Tutorial), and i want to be able to view and modify scss from dev tools.

The app functions correctly, css classes i've added in scss files work correctly as well but i see a main.css file instead of the foo.css from which it was compiled. I can even view typescript files on dev tools and debug, which means source map for js->ts is working. It's the css-> scss that's not working.

I can see these files on www/build

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

Which means the source map is generated correctly. I have also enabled css source maps in chrome from - DevTools -> Settings ->Sources -> Enable CSS source maps

Positron

Answer 1

I would mark this as duplicate but it seems like i cannot. Answer can be found on this SO postenter link description here. Basically,

You'll need to extend your sass.config.js file, by default source 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.

Positron