Ionic-app-scripts: Sass source map not working

[pakit84]

Hello ,
I am not able to generate scss source maps.
After "ionic serve" I'm navigating to www/build folder, there is main.css.map but it contains null instead of generated sourcemaps.

Do you have any idea why this is happening?

Steps to reproduce:

1. app-scripts 1.3.0 or higher
2. ionic serve
3. go to www/build and check main.css.map : should contain "null" string

Which @ionic/app-scripts version are you using?

1.3.0, issue even with the latest version

Thanks.

Regards.

[danbucholtz]

To be totally honest, we probably aren't going to invest any resources into this anytime soon. There are too many higher priority items. We'll take a well-tested PR though.

Thanks,
Dan

[mWardi]

Well, sass source map is disabled by default , (https://github.com/driftyco/ionic-app-scripts/blob/master/config/sass.config.js#L16)

You can activate that manually by adding your own build script on package.json

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

[hikumealan]

Seems like a easy fix. Hopefully it can get into the next release.

[HugoHeneault]

@ElWardi What's inside the sass.config.js ? :)

[HugoHeneault]

Found the answer on https://stackoverflow.com/a/44507062/1847249

config/sass.config.js:

module.exports = {
  sourceMap: true,
}

package.json:

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

[mWardi]

@hikumealan
I dont think this should be changed as source map should be available for development only.
Maybe a documentation is required.

@HugoHeneault
A link to the sass.config.js is available on my above answer. I just copied the whole file as i am not sure if the file will be overridden or merged when building the config.

[snys98]

@HugoHeneault @ElWardi Hi, follow your tips, I successfully generated the sass source map file. But I got some thing like this. Do you have any idea of this?

Here is my sass.config.js

module.exports = {
  sourceMap: true,
}

Maybe I should work more for the sass.config.js?

[mWardi]

@snys98 Hi, Looks like a path problem, i am not sure about that since i am not familiar with the Windows env. maybe check the sourcemap path option here https://github.com/ionic-team/ionic-app-scripts/blob/718d2fc5cece2b141ea7b349df7e185a49c49325/config/sass.config.js#L78 as per doc it says

directoryMaps: Compiled JS modules may be within a different directory than its source file and sibling component sass files. For example, NGC places it's files within the .tmp directory but doesn't copy over its sass files. This is useful so sass also checks the JavaScript's source directory for sass files.

[lucasprogamer]

@HugoHeneault work's, thks