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.

Improve this question
5
  • 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 Commented Dec 21, 2022 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? Commented Dec 21, 2022 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. Commented Dec 21, 2022 at 14:23
  • Try with --source-map true param Commented Dec 21, 2022 at 14:32
  • 1
    --source-map true worked !! Thank you ! Commented Dec 21, 2022 at 14:50

1 Answer 1

Reset to default
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/.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.