29 comments
Comment actions Permalink

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

2
Comment actions Permalink

My directory structure is like so

gafl_2014/assets/css/sass


I want my css files to be located in the css folder not the sass folder.

I copied and pasted your recommendation and ended up with this:
gafl_2014/assets/css/sass/sites/gafl/wp-content/themes/gafl_2014/assets/css/mycssfile.css


If, instead I put
Arguments: --no-cache --update $FileName$:../$FileNameWithoutExtension$.css

Output: :../$FileNameWithoutExtension$.css

Then I get what I'm looking for:
gafl_2014/assets/css/mycssfile.css


I would have thought your macro would have worked. I guess I just don't understand them enough to know how to use them properly, but would love to know the CORRECT way to use them! :)
0
Comment actions Permalink

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?)

1
Comment actions Permalink

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?

0
Comment actions Permalink

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

0
Comment actions Permalink

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/


I'd love to know what I'm doing wrong or how to correct it.

Thanks for the help.
0
Comment actions Permalink

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



Attachment(s):
screencast.mp4
0
Comment actions Permalink

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. ;)

0
Comment actions Permalink

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.

0
Comment actions Permalink

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.

0
Comment actions Permalink

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



1
Comment actions Permalink

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$

5
Comment actions Permalink

That worked!!!  Thank you!!!

1
Comment actions Permalink

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$

1
Comment actions Permalink

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!

0
Comment actions Permalink

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!

0
Comment actions Permalink

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

-1
Comment actions Permalink

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

3
Comment actions Permalink

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

0
Comment actions Permalink

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.

0
Comment actions Permalink

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

0
Comment actions Permalink

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"; ):

0
Comment actions Permalink

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

1
Comment actions Permalink

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!

0
Comment actions Permalink

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

 

1
Comment actions Permalink

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…?

0
Comment actions Permalink

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

1
Comment actions Permalink

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.

0
Comment actions Permalink

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

0

Please sign in to leave a comment.