1. Home
  2. Knowledge Base
  3. Ghostlab: Feature Reference
  4. Preprocessors


Preprocessors compile your Sass, Jade and Typescript projects (and some more) into browser-ready CSS, HTML and JavaScript. They can be enabled for projects that you serve locally from your file system.

Note that these preprocessors aren’t shipped with Ghostlab. When you are using one of them and they aren’t available on your system, Ghostlab tries to install them either via NPM (node package manager) or via gem (Ruby package manager), depending on availability of the package. If you’re system doesn’t meet the requirement for that (e.g. if you haven’t installed NPM or ruby), Ghostlab will tell you so.



When you have a local file system project, Ghostlab will watch for file changes and reload the page whenever you edit it. If you enable a certain preprocessor, say Sass, it will not only watch for CSS file changes, but also for Sass file changes. Once it detects a Sass file change, it will try to run the Sass compiler to generate an up-to-date version of the CSS file. Note that in case you don’t want file watching, you can simply turn it off, and if you have your expert grunt file with sophisticated watch tasks already in place, then you may well skip this section.


Up to a certain level, Ghostlab tries to guess a good configuration for any preprocessor you activate. In any case, you can specify all the necessary options for any preprocessor in its settings. Let’s have a look at these for the example of Sass.

Sass source directory: this is the directory where your Sass files are located. When you specify a source directory, then the generated output file will be created in the build directory with a relative path identical to the one of the source file relative to the source directory.

Output directory: this is the directory where the compiler puts your generated CSS. If the source file has a path relative to the source directory, then that relative path will be reproduced in the output directory.

File: if you specify a main file, then that file will be compiled whenver any file of it’s kind – so any Sass file – is changed. Please be sure to provide this option if you don’t want your partials to be compiled individually. E.g. if you are working on _partial.scss and change it, Ghostlab will try to compile it all by itself if you haven’t specified a main file. If you have specified a main file, it will simply compile that.

Additional command line parameters: you can specify any number of additional command line parameters – be it to enable support for compass (–compass), or to allow or disallow the generation of sourcemaps, to compress the output, etc.



Was this article helpful?

Related Articles