1

I have a project where in the public directory, there is a scss and a css directory.

When I modify my scss files, they are compiled as css inside the correct directory. The problem I am getting is I can't manage to generate the source file associated with it.

Here is my PhpStorm File Watcher config :

PhpStorm file watcher configuration

Here is the result I expect : (the coding.css file is the one I generated, the claim.css and claim.css.map are what I want.

enter image description here

From what I understood, Sass should generate a source map file by default, but I am not getting source map files.

LazyOne
  • 158,824
  • 45
  • 388
  • 391
HectorB
  • 113
  • 6
  • What `sass` is that (engine / language used)? How did you install it. Is that **node-sass**? The syntax seems similar. The official/current Node.js based Sass I'm using now creates the `.map` file just fine .. but params a bit different. E.g. I'm using `--no-source-map --style=expanded $FileName$:$FileNameWithoutExtension$.css` – LazyOne Dec 21 '22 at 14:14
  • **P.S.** BTW, the "Output paths to refresh" field content looks wrong. It should specify the files the IDE should check after the tool is finished running. And it does not point to the `public/css/` folder where they are created (in fact -- it looks broken to me). Maybe they are there but the IDE does not see it (the Virtual File System subsystem that it uses). Try hitting the `Refresh` button (`File | Reload all from Disk`) -- will the IDE see the new files? – LazyOne Dec 21 '22 at 14:19
  • @LazyOne yes, sorry for missing that important information. I am indeed using `node-sass`. I know it should create it, that's what I don't understand. I tried reloading from Disk everytime and I also checked using my standard file explorer but still no file. I changed the "Ouputs path to refresh" to my `public/css/`path and it is still not working. – HectorB Dec 21 '22 at 14:23
  • Try with `--source-map true ` param – LazyOne Dec 21 '22 at 14:32
  • 1
    `--source-map true` worked !! Thank you ! – HectorB Dec 21 '22 at 14:50

1 Answers1

1

Thanks to @LazyOne for the answer.

It turns out I was only missing --source-map true in the arguments. Adding it generated the source map file I wanted.

Also, as LazyOne pointed out, my "Outputs to Refresh" was not correct. I needed it to point to the directory my files were generated.

For my config, it is $ProjectFileDir$/public/css/.

HectorB
  • 113
  • 6
  • 1
    *"For my config, it is `$ProjectFileDir$/public/css/`"* This should point to the actual files that the IDE needs to check and not a folder. It should list both .css and .css.map files there via `:` -- something like `$ProjectFileDir$/public/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/public/css/$FileNameWithoutExtension$.css.map`. The way to test it: open all 3 files (source sass, compiled css and .map) in 3 split tabs (so you see them all at once), make a change in source (e.g. change color from green to red and save -- file watcher should run the tool and load new file content. – LazyOne Dec 21 '22 at 15:30