How to auto compile sass/scss files in Eclipse

First of all, sass/scss compilation needs Ruby to work with.

So, ok, we will install it.

But, we need to use system wide Ruby, ’cause I tried with rvm but there comes some problems:

/usr/bin/env: ruby_executable_hooks: No such file or directory

So if you use rvm, switch it back to:

rvm use system

Now go to:

https://www.ruby-lang.org/en/documentation/installation/

Then to make sure that Ruby is successfully installed:

ruby -v

It should have some information like:

[ducfilan@localhost]$ ruby -v
 ruby 2.1.8p440 (2015-12-16 revision 53160) [x86_64-linux]

Now come to sass:

gem install sass
# su in case of permission errors

Once again to make sure:

sass -v

Some information like this means we’ve successfully installed it:

[ducfilan@localhost]$ sass -v
Sass 3.4.23 (Selective Steve)

Ok, preparation is done. Open your project in Eclipse.

Right click on it > Properties > Builder > New > Choose ‘Program’ then Ok.

2017-01-25_140725

We need to fill out some fields:

  1. Location
    • Get the location of sass using:
      • which sass
  1. Working Directory
    • Relative path to your folder, with ${workspace_loc:/…} as root. Use Browse workspace to make it ez.
  2. Arguments
    • --update ${workspace_loc:/QTEC-Web/public/sass}:${workspace_loc:/QTEC-Web/public/css} --sourcemap=none --style compressed
    • With:
      • –update: Means compiling when your sass file is changed.
      • ${workspace_loc:/QTEC-Web/public/sass}: Your sass folder
      • ${workspace_loc:/QTEC-Web/public/css}: Your output folder
      • –sourcemap=none: No generating .map file
      • –style compressed: Output style

For example in my case:

2017-01-25_141341.png

After that, don’t close the configuration screen.

Switch to Build options tab and check only following files, uncheck all others if they are pre-checked.

  1. Allocate Console
  2. During auto builds

Now you’re done, edit an .scss file and you will see the message of writing .css file in the output screen. If not, you’re doing it wrong.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s