19 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

0
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



0
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$

4
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$

0
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

2
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

Please sign in to leave a comment.