File Watchers in SCSS - output directory

Hi!

I have different scss files in different directory structures, like this:

component => folder1 => scss => file1.scss
component => folder2 => scss => file2.scss

And I would like to generate css to this folder structure:

media => folder1 => css => file1.css
media => folder2 => css => file2.css

I think I have to use MACROS but I can't find out how. Does anyone knows how to do it?

Regards.

Mike

 

36 comments
Avatar
Vladimir Luchansky
Comment actions Permalink

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.

1
Comment actions Permalink

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 

0
Comment actions Permalink

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?

 

0
Comment actions Permalink

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

0
Comment actions Permalink

 

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.

 

0
Comment actions Permalink

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

0
Comment actions Permalink

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"
}

 

 

0
Comment actions Permalink

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

0
Comment actions Permalink

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.

 

0
Comment actions Permalink

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

0
Comment actions Permalink

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?

0
Comment actions Permalink

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

0
Comment actions Permalink

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.

0
Comment actions Permalink

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

0
Comment actions Permalink

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

 

0
Comment actions Permalink

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

0
Comment actions Permalink

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.

 

0
Comment actions Permalink

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

0
Comment actions Permalink

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

0
Comment actions Permalink

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

0
Comment actions Permalink

>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

0
Comment actions Permalink

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?

0
Comment actions Permalink

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.

0
Comment actions Permalink

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.

 

0
Comment actions Permalink

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

 

0
Comment actions Permalink

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

0
Comment actions Permalink

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

0
Comment actions Permalink

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?

 

 

0
Comment actions Permalink

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$

0

Please sign in to leave a comment.