CODEWITHSUNDEEP
intellij-ideasasscompilationfile-watcher
Ewinnn
Ewinnn

Reputation: 337

Intellij: Sass to CSS: file watcher output folder

I have IntelliJ Ultimate Edition and I'm compiling .scss files to .css. The problem is that every .scss file is compiled to .css in the same folder. I don't want that.

My folder structure is like so:

assets -- css ---- main.css -- scss ---- folder -------icons.scss -------elements.scss ---- folder -------navigation.scss ---- main.scss

The main.scss contains all the necessary files to compile to .css. But I ONLY want to compile main.scss to ../css/main.css when I make changes in one of these files/folders in this structure. How can I do that? Thanks so much.

Current settings in the Edit Watcher window in IntelliJ:

Program: D:\Program Files (x86)\Ruby22\bin\scss.bat

Arguments: --no-cache --update $FileName$:$FileNameWithoutExtension$.css

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

Working directory: C:\localhost\www\website\assets\sass

Upvotes: 3

Views: 2651

Answers (2)

Jitendra Rathor
Jitendra Rathor

Reputation: 686

I am having folder structure as given below. all partial.scss file imported in ecom-styles.scss

assets
-- css
---- ecom-styles.css.css
-- scss
---- _file1.scss
---- _file2.scss
---- _file3.scss
---- _file4.scss
---- ecom-styles.scss

I changed my watcher in IntelliJ as follows and it works for me

Arguments: $FileName$ $FileParentDir$/css/$FileNameWithoutExtension$.css
Output paths to refresh: $ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map

Upvotes: 0

lena
lena

Reputation: 93868

Try changing your watcher as follows:

Arguments: --no-cache --update $FileName$:$ProjectFileDir$/assets/css/$FileNameWithoutExtension$.css
Output paths to refresh: $ProjectFileDir$/assets/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/assets/css/$FileNameWithoutExtension$.css.map

If your main.scss imports all your partial .scss files, and Track only root files is enabled in file watcher settings, the ../css/main.css will be created/updated when you make changes in any of these files

Upvotes: 6

Related Questions