Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SCSS / SASS to CSS in special folder with PHPstorm 7 file watcher

Tags:

I used PHPstorm 6 and my SCSS-Files were compiled into the CSS-Folder, so I have:

css   -- main.css img js scss   -- main.scss   -- _variables.scss   ... 

Hier are my definitions on SCSS File Watcher enter image description here

Everthing worked fine, but yesterday I updated my PHPstorm from version 6 to 7 and now my SCSS compile / file watcher are not working anymore. The File Watcher compile the CSS-File into the SCSS-Folder. But I want it in my CSS-Folder!!!

What are your settings in PHPstorm 7 Filewatcher for SCSS Files?

here is my data structure, you'll see the file style.css with FileDirName/css/style.css one folder "to high" .. enter image description here

like image 993
user2310852 Avatar asked Oct 25 '13 10:10

user2310852


People also ask

How do I compile SCSS to CSS in terminal?

Once Sass is installed, you can compile your Sass to CSS using the sass command. You'll need to tell Sass which file to build from, and where to output CSS to. For example, running sass input.scss output.css from your terminal would take a single Sass file, input.scss , and compile that file to output.css .

Is sass the same as SCSS?

SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that will be compiled or interpreted into CSS. SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax.

Does SCSS need to be compiled?

scss is compiled into CSS when you save your project manually or automatically and how the changes to _grid. scss are reflected in the generated CSS file.

How do I enable file watcher?

Automatically run file watchers on savePress Ctrl+Alt+S to open the IDE settings and select Tools | Actions on Save. Enable the File Watcher option and apply the changes.


2 Answers

AAAAAAArrrgh!

the "backslashes" were the problem.

output path

$FileParentDir$/css/$FileNameWithoutExtension$.css 

enter image description here

like image 162
user2310852 Avatar answered Dec 15 '22 09:12

user2310852


To place rendered with PHPStorm File Watcher css file in css directory and keep sass file in sass directory I've changed Arguments and Output paths to refresh.

Arguments field:

--no-cache --update $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css --style expanded  

you can remove --style expanded if you want to see css with additional spaces as it is looking in sass. this argument is only changing the indents in css file to old fashioned and drupal requires this.

and Output paths to refresh field:

$FileParentDir$/css/$FileNameWithoutExtension$.css 
like image 20
Anatolii Pazhyn Avatar answered Dec 15 '22 07:12

Anatolii Pazhyn