Search code examples
ionic-frameworksource-mapsdeveloper-tools

Cannot view scss files while working with Ionic on dev tools

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

Solution

  • 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.