SCSS file watcher output directory

Hello!

not sure what directory should the files be placed to... Should it always be <project_root>/assets/css? Or <project_root>/css? Or?
For the first case, please try changing Arguments field as follows:

--no-cache --update $FileName$:$ProjectFileDir$/assets/css/$FileNameWithoutExtension$.css

Output paths to refresh:

$ProjectFileDir$/assets/css/$FileNameWithoutExtension$.css

My directory structure is like so

gafl_2014/assets/css/sass

gafl_2014/assets/css/sass/sites/gafl/wp-content/themes/gafl_2014/assets/css/mycssfile.css

gafl_2014/assets/css/mycssfile.css

In WebStorm (and PHPStorm) $ProjectFileDir$ is normally resolved to project root folder. I have no idea why it was expanded in such a weird way for you (are there any symlinks involved?)

There are no symlinks. Glad to hear I'm not crazy.

It is a wordpress project and I've assigned the theme folder as the project folder.

Should I post my files and settings.jar file somewhere for someone to have a look at?

no, settings won't help. Sample project (replicating the structure, with watchers configured) would be much more useful

Here what I've tried since.

I invalidated the cache and restarted.
Through the terminal, I checked for hidden files.
I deleted the .idea folder and started fresh.
I removed the project folder from wordpress, installed a fresh copy of wordpress, then pasted the theme into the themes folder.

It keeps doing that weird thing I reported earlier.

Here is a link to the zipped files.
https://dl.dropboxusercontent.com/u/3465726/wp-gafl.zip - 7.0mb

The project folder is set to:

wordpress/wp-content/themes/gafl/

Thanks for details!

Works fine for me using your project... I've installed wordpress into my Apache server, opened your project, modified the path to sass executable in file watcher settings - that's all... Watcher works as expected. See the attached screencast

Thank you for your help. There is obviously something weird going on on my end. It must have something to do with my hierarchy of folders where this directory is stored. I will do some testing to get this figured out.

The good news is that your video shows me that it works as it is describe in the macros. Meaning, that part of the equation is intuitive and works like one would expect it to work.

Back to testing. I love a challenge. ;)

Argh. My last reply got lost in cyberspace.

Basically, If there is a space in a directory name in any of the parent folders containing the PhpStorm project, then file-watcher will throw an error.

I tested multiple times and came to the same conclusion.

Here is a link to the screencast showing this behavior.

How would you specify path to such folder (with spaces) in console on Mac? How would you run that command in console if typed manually?

I'm on Windows, and it would be like "path" (inside double quotes). See if similar can be applied in your case. (P.S. I have not tried this with SCSS so cannot tell if it will actually work even here on Windows -- mainly due to the way how that parameter is built)

Other than that -- rename folder that has spaces in its name as it's rather expected behaviour as space breaks parameters (making 2 params instead of one) unless escaped somehow.

Hi everyone, I have the same problem with Webstorm.  I am trying to do this net ninja project.. learn scss...  https://github.com/iamshaunjp/sass-playlist

He wants us to have a scss folder with 4 scss files.  But, the output path has to go to css/styles.css, not scss/styles.scss/styles.css.

And reset.scss, variables.scss, and mixins.scss is being imported to the styles.scss, then ultimately styles.css.  

Everything has to go to the final css/styles.css.

This is what Webstorm File Watcher for SCSS looks like, and the other two are the configuration and a part of the styles.scss file showing that the other three files are to be imported.  

Can you please tell me how to configure the Arguments and Output Path.  

index.html only has

<link href="css/styles.css" type="text/css" rel="stylesheet"/>






I thank everyone so much for helping with this.  

David

You can try the following:

Arguments: --no-cache --update $FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css

Output paths to refresh: $ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map

Working directory: $FileDir$

That worked!!!  Thank you!!!

A little bit more adaptive(and compressed, delete it if you want): 

Arguments: --no-cache --style compressed --update $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css
Output paths to refresh:  
$FileParentDir$/css/$FileNameWithoutExtension$.css:$FileParentDir$/css/$FileNameWithoutExtension$.css.map

Working directory: $FileDir$

Can't seem to get this working, either!

My project structure is this:

Project Root
  - css
  - sass
    - main.scss

Want to compile main.scss in the sass directory to a file of the same name in the css directory. When I use the above argument and output paths to refresh, WebStorm just churns away until I tell it to quit.

I realize there are a couple different sets of arguments up there, so here's what I'm using:

(arguments)
--no-cache --update $FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css

(output paths to refresh)
$ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map

I'm using node-sass installed into my project.

Thanks!

If you're experiencing this difficulty, too, here's the answer that worked for me:

https://stackoverflow.com/questions/47620774/cant-compile-scss-inside-of-webstorm

Cheers!

I work on Debian Stretch. I had many problems with  plugins -update, -cache and -o. I found one simple solution, that was:

Arguments: $FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css

Output paths to refresh: $FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css

Gabriel

If you are using SASS installed with npm (not ruby SASS), and like to have your .css file(s) generated in $ProjectFileDir$/css, you need using $FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css as Arguments and $ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map as Output paths to refresh

thanks, your note "SASS installed with npm (not ruby SASS)" and correct settings was really helpful, i'm a starter and for hours i couldnot find solution for my settings in Intellij before i reached your last answer.

I tried earlier solutions, but all the time received error that no 'cache' command and so on

Here is a workaround - without struggeling in outputpath folder system:
If you want to keep it simple just place the main.scss file in the folder where the output main.css should be. Then just point your files to be complied in main.scss like /mysass_subfolder/sassfile/ and your output will be in the folder where you main.scss is.
* Hope that helps out somehow.

This is my configuration for PhpStorm 2020.3

Arguments: $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css

Output paths to refresh: $FileParentDir$/css/$FileNameWithoutExtension$.css:$FileParentDir$/css/$FileNameWithoutExtension$.css.map

IMHO if I want to place into any folder the compiled .css file(s), I need to add output folder (only!) as Arguments.

To copy-paste:

$FileName$ --source-map=true -o $ProjectFileDir$/layout_1/LTR/default/full/assets/css/

(the Output paths can be remain the original)

Using this settings (PhpStorm 2021.3.1):

the result is (in layout.scss @import "../layout/header"; ):

this is expected: the SASS compiler normally doesn't produce separate .css files for partials, all files are merged into a single file with name matching your "main" .scss. So, when you edit a partial, the IDE finds a main stylesheet that imports it and passes it to compiler to produce a single .css

Hi there, unfortunately I wasn't able to solve my problem reading this thread...

I'm a complete noob when it comes to WebStorm, regular expressions etc. I just switched from Dreamweaver (...) to WebStorm and trying to get scss compiling up and running.

What I am looking for:

All our scss files are saved in a specific scss folder:

/ProjectDir/some_folder/another_folder/scss

I want my css and .map.css files to be outputted in:

/ProjectDir/some_folder/another_folder/css

Exact the same path, only folder "scss" is replaced by "css". In Dreamweaver I have this simple setting:

Does anyone know how to achieve this with regular expressions. I don't know what "Arguments" mean and I don't know what "Output paths to refresh" means... So sorry, real noob.

Thanks a lot!

$FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css should do the thing:

Thanks so much for your fast reply! I don’t fully understand; shouldn’t the source folder (where scss files are saved) be defined somewhere…?

no, it's just a folder where the current .scss file is located. Did you try these settings?

Thanks! Yes, I’ve tried these but unfortunately they didn’t work for me. I tried instructions mentioned jn this post (posted in this thread as well): https://stackoverflow.com/questions/47620774/cant-compile-scss-inside-of-webstorm

This finally worked for me.

Hmm... Not sure how my answer in https://stackoverflow.com/questions/47620774/cant-compile-scss-inside-of-webstorm can help with your issue, the configuration suggested there doesn't match your setup... Anyway, nice to hear that the problem is solved