File Watchers in SCSS - output directory

Hello,

In the SCSS File Watcher settings you need to set "Arguments" and "Output paths to refresh" to your desired location just as you would set them via command line.

"Arguments" is what we pass to the tool. "Output paths" is used by PhpStorm to synchronize its file system with external changes - you need to make sure that the pattern specified there matches the actual program output so that the IDE knows where to look for generated files.

So you need to modify BOTH 'Arguments' and 'Output path to refresh' options to have the generated files created in non-default location. Like:

Arguments: --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output paths to refresh: ../css/$FileNameWithoutExtension$.css:../css/$FileNameWithoutExtension$.css.map

I just checked and it works perfectly. You can use other variables from Macros list if you need to specify a trickier location, example above just goes up a level, creates 'css' directory there and places the generated files into it.

if you are using Sass by dart try omitting the --no-cache --update  part, it's what worked for me
but again the original question was about SCSS 

Still not copying / updating the files in the css folder off the root (in this example) for me.

Nothing I change in the tow fields makes any difference.

Program: /Users/john/Sites/php-storm-sass-file-watcher/node_modules/sass/sass.dart.js

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

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

Why don't changes creat any output other than the default of where the source SCSS files is located?

Where would you like the files to be created? Please set the Show Console: to Always in your file watcher settings and then share a screenshot of the console that's opened once the watcher is triggered

The output shows success but the destination is ignored:

One example of MANY things I've tried.  Here I just was trying for at least the dir above the one I was getting output for.  I know this is not representing what I really want but I was trying to see ANY change in output.

I would also like a file watcher that updated the html and possibly other files to that location.

The output doesn't match with the style watcher setup; is really it provided by a watcher shown in screenshot?

Please see https://sass-lang.com/documentation/cli/dart-sass#many-to-many-mode about SASS CLI syntax

It's transpiling just fine.  I am watching the output and it's updating.  My struggle is with the output locations for the watcher I think.  No matter how I change the output string, nothing changes.  Is the SASS transpiler overriding the output?

I did create a package.json file that works fairly well but I wanted to use a watcher if I could.

{
  "name": "sass_no_extension",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "build:sass": "sass  --no-source-map src/sass:public/css",
    "copy:html": "copyfiles -u 1 ./src/*.html public",
    "copy": "npm-run-all --parallel copy:*",
    "watch:html": "onchange 'src/*.html' -- npm run copy:html",
    "watch:sass": "sass  --no-source-map --watch src/sass:public/css",
    "watch": "npm-run-all --parallel watch:*",
    "serve": "browser-sync start --server public --files public",
    "start": "npm-run-all copy --parallel watch serve",
    "build": "npm-run-all copy:html build:*",
    "postbuild": "postcss src/sass/css/*.css -u autoprefixer cssnano -r --no-map"
  },
  "dependencies": {
    "autoprefixer": "^10.4.2",
    "browser-sync": "^2.27.7",
    "copyfiles": "^2.4.1",
    "cssnano": "^5.0.17",
    "npm-run-all": "^4.1.5",
    "onchange": "^7.1.0",
    "postcss-cli": "^9.1.0",
    "sass": "^1.54.7"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

If you like the resultant CSS to be saved to public/css, update the watcher Arguments: and Output paths to refresh: accordingly:

Arguments: --no-source-map $FileName$:$ProjectFileDir$/public/css/$FileNameWithoutExtension$.css

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

I tried your suggestion and no change in the output location even though it passed in the output windows.  The output was in the same location as the source file.

please make sure that this is the only file watcher you have configured

It is the only one I have configured.  I would like to watch and move the html files when they are updated though.   Is that possible?

Yes, you can set up any tool/batch script as a file watcher

But I guess it's "moot" if I can't get it to work :)

My npm script above works, but I have to manually save the file or auto save every x seconds.

I would really like to know how to resolve the issue at hand if you can help.

You can set up your npm script as a file watcher - npm has to be configured as a Program, the other stuff passed as Arguments

Did you see which program I am configuring for? I'm running the local to the project node/sass transpiler. It absolutely runs and without execution error.    I have no issues running the program.  It's the outputs and their re-directon that aren't working. :P

Sorry, I'm not sure I understand what issues you refer to. Is it still about SASS? There must be something wrong with your project setup. The configuration suggested by me does definitely work, but you must be using some different one according to provided screenshots, as the command that is actually executed has almost nothing in common with the file watcher configuration

There is a definite "disconnect" going on.  I used the parameters you suggested to create outputs in the directory I was asking about and attempting to achieve.

Arguments: --no-source-map $FileName$:$ProjectFileDir$/public/css/$FileNameWithoutExtension$.css

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

I showed you a screenshot of the file watcher with those parameters above.

I am not seeing the re-directed output.  I get a valid execution code and the style.css file is reflecting the changes, it's just not being output / located in the output directory I am trying to achieve.  In fact, no changes I make to the Output path makes any difference where the output gets sent to.  it results in the same place I have always seen it - no matter what I change in the output path.

You asked if I had any other watchers being used and I said no, but I asked if I could still have a separate watcher configured for an html file and you said yes I could.

If I can't achieve this using the prams you are suggesting, I have no clue as to what to do.

I would be happy to do a screen share with you say over Zoom to demonstrate if that helps.

What the heck....  Ok, it started working IF I don't use the sass compiler in the local project but use the globally installed one.

Why can't I use the local to the project one??

How would I create a File Watcher for a single file or even all the files in a directory? (html) etc.

Would you like the watcher to trigger when you change a certain file (or a file in certain directory)? You need setting the file watcher scope accordingly

>Why can't I use the local to the project one??

you can... Just make sure to specify a full pat to it, as locally installed binaries aren't added to $PATH

Yes.  So say I want all ".html files in the src folder to end up in the Public folder?

Also:

I still would like to know why the global node sass works with your parameters but specifying the one in the project to execute the operation doesn't work with the output I want?

So this: "/Users/john/Sites/php-storm-sass-file-watcher/node_modules/sass/sass.dart.js" is not a valid path to the local even though I selected it from the dialogue?  It runs fine with no errors so it must be using the program.

Ok, I can use the sass.js but not the dart version for some reason.  Weird.

I can live with that if I could understand the copying other files when modified (html) issue.

If I am only performing a "copy" operation, what should I declare in the "Program" field?

node_modules/sass/sass.js is also Dart SASS. But the right path to locally installed SASS compiler is node_modules/.bin/sass

What would the settings look like to copy the currently edited html file?

If you do this with NPM script, you need specifying npm as a Program, the other stuff passed as Arguments - as I wrote above. What problems doing this have you faced?

I don't need npm to copy a file from one place to another if it is a regular html file right?

Wouldn't I use just a "cp" command as the "Program"?

Arguments: $FileName$

Output path to refresh: $ProjectFileDir$/public/$FileName$