Scss/Sass to CSS in Special Folder with PHPstorm 7 File Watcher

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

AAAAAAArrrgh!

the "backslashes" were the problem.

output path

$FileParentDir$/css/$FileNameWithoutExtension$.css

How to set PhpStorm scss watcher if css and scss are separate sibling folders in static

I'd suggest changing arguments as follows:

Arguments: $FileName$:$ProjectFileDir$\static\css\$FileDirPathFromParent(scss)$$FileNameWithoutExtension$.css

Ouput paths to refresh: $ProjectFileDir$/static/css/$FileDirPathFromParent(scss)$/$FileNameWithoutExtension$.css:$ProjectFileDir$/static/css/$FileDirPathFromParent(scss)$/$FileNameWithoutExtension$.css.map

PhpStorm and SCSS compile scss file into one css file

1. if you have a primary SCSS file that imports other files (partials, their names usually start with underscore), you just need to make sure that 'Track only root files' is enabled in File watcher settings to get the output merged into a single .css

2. If you don't like .map files being created, pass --sourcemap=none to compiler

Intellij: Sass to CSS: file watcher output folder

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

How do I correctly setup the scss file watcher in PhpStorm?

From the manual: "In the Output Paths text box, specify the files where the transpiler stores its output: the resulting source code, source maps, and dependencies. Based on this settings, PhpStorm detects files generated through transpilation."

Is it possible in PhpStorm File Watcher to compile SCSS to CSS AND create minified css?

Possible solutions:

1. Create 2 files watchers - SCSS->CSS and CSS->MIN.CSS. Use any available CSS uglifier for the second one - YUI Compressor, for example. See https://www.jetbrains.com/help/webstorm/2016.3/minifying-css.html

2. create a batch script that does the job (calls SCSS compiler for your .scss and then compresses the resultant CSS) and set it up as a file watcher

3. Use Gulp/Grunt tasks to compile and minify your files. You can either set up Gulp/Grunt as file watchers, or use Gulp/Grunt watch tasks

PhpStorm SCSS file-watcher creates duplicates

There are 3 dots in the output path. Change it to:

../css/$FileNameWithoutExtension$.css:../css/$FileNameWithoutExtension$.css.map

---

Related Topics