SCSS file watcher output directory
I'm absolutely stumped. I've tried every variation I could think of, read the Help, but no luck.
Here is my directory
css/sass/main.scss
I want the
main.cssfile to go into the
css/directory.
?:|
Attachment(s):
Screenshot 2014-02-04 13.29.02.png
Please sign in to leave a comment.
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$
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
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
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?)
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
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$
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
$FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css should do the thing:
no, it's just a folder where the current .scss file is located. Did you try these settings?
My directory structure is like so
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:
If, instead I put
Arguments: --no-cache --update $FileName$:../$FileNameWithoutExtension$.css
Output: :../$FileNameWithoutExtension$.css
Then I get what I'm looking for:
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! :)
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/
I'd love to know what I'm doing wrong or how to correct it.
Thanks for the help.
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
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.
Can't seem to get this working, either!
My project structure is this:
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!
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"; ):
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!
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…?
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
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