How to watch only main sass file on phpstorm? - sass

Question

I have a css structure where I have a folder with vendors, other with modules, other with framework, and on the root sass I have my main file which imports all the other sass files form the other folders.
How can I set the file watcher on PHPStorm to only watch that specific main.scss file??
This is what I have on PHPStorm file watcher.
Arguments:
cache --update $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css
Working directory:
$FileDir$
Output paths to refresh:
$FileParentDir$/css/$FileNameWithoutExtension$.css

Answer 1

yesterday i had the same problem and gave up and told myself that i have to sleep over it so i can craft new ideas 😁
The magic word here is Partials > SASS Guide: Partials
You have to extend all your non-main files with an underscore so your file vendors.sass for example would look like this: _vendors.sass. The File Watcher now knows that he can skip this file since it's a partial. The main file is then the only one which doesn't come with an underscore :)
Beneath i show you my folder structure and the configurations for the watcher.
├── css
│   ├── sass
│   │   ├── _cookie.sass
│   │   ├── _farben.sass
│   │   ├── _navi.sass
│   │   ├── _schriften.sass
│   │   ├── _sidebar.sass
│   │   ├── _typo.sass
│   │   └── style.sass
│   ├── style.css
And this is the configuration for phpstorm to tell the app where to save the (compressed) output-file:
Arguments:
--no-cache --update $FileName$:$FileParentDir$/$FileNameWithoutExtension$.css --style compressed
Working directory:
$fileDir$
Output paths to refresh:
$FileParentDir$/$FileNameWithoutExtension$.css
I think that you maybe already have solved this problem, since your question is more than five months old. But in my case i was blind to see that this was a simple sass-thing. So hopefully no one needs to struggle for a solution like me in the future!
Cheers

Answer 2

This is possible with PHPStorm (and presumably WebStorm).
Note: I am using version 2018.3
To transpile just a single "main" file, you need to configure the PHPStorm File Watcher Scope:
Open PHPStorm Preferences (on a Mac, command comma)
Search for File Watchers and edit them.
Find your SCSS file watcher (presumably this will work with other watchers) and edit it.
In the configuration window, click the 3-dot icon that is to the right of the "Scopes" dropdown.
In the "Scopes" window, click the + icon to add a new scope.
From the "Add Scope" dropdown, choose Local Scope.
When prompted, enter the descriptive name of the scope (something like Theme File Only)
Now you should be in the "Scope" window (see screenshot). In the file explorer section in the middle, expand the tree and find the file you'd like to transpile.
Click the file (you can choose multiple if appropriate), and click the Include button to the right.
Click Apply then OK.
In your file watcher dialog, in the "Scope" dropdown, ensure that the newly added scope (named Them File Only or similar) is selected. Click Apply then OK.
At this point, the IDE will only watch, and transpile, the specific file(s) selected.