Intellij IDEA 11: how can I compile .css from .less?

Question

how can I compile .css from .less in intellij ? sure this should be dead easy, but its got me stumped. anyone know how to do this?

Answer 1

To use File Watchers to compile LESS in IDEA 12:

Install File Watchers extension from within IDEA. Go to Settings > IDE Settings > Plugins.

Next you need a transcoder, which is included in the LESS package for node.js

Install node.js from http://nodejs.org/

From the command line, type npm install -g less to install the LESS package.

Then you can create a watcher under Settings > Project Settings > File Watchers. Choose the LESS template and it will find your transcoder automatically.

Answer 2

IntelliJ IDEA relies on web frameworks and third-party deployment tools to perform this task. There is a feature request to perform such compilation internally, feel free to vote.

Answer 3

I know this question is for IntelliJ IDEA 11, but if you found this page even though you're searching for v12, there's an option better than the LESS compiler plugin (which was a great plugin -- thanks a lot for it, Andy!).

It's a plugin called File Watchers, made by the JetBrains team. It comes bundled with WebStorm 6 and PhpStorm 6, but you have to download and install for the other JetBrians IDEs. Steps:

Settings -> Plugins -> Browse repositories (button at the bottom) -> search for "file watchers" -> select File Watchers -> click download icon at top -> Close -> OK

More info on JetBrains blog.

Answer 4

I wrote a LESS Compiler plugin that automatically compiles LESS files to CSS whenever they change.

You can configure multiple LESS directories to watch per project, and the output of each will be copied to one or more output CSS directories that you specify:

You can include / exclude specific files by using path patterns in the settings dialog.

It will also detect when you move, copy, or delete a watched LESS file and offer to perform the same operation on the corresponding CSS file(s).

The plugin is open source, so you can view and fork the source code on GitHub if you like.

Answer 5

You can set a File Watcher with the following parameters:

Name: LESS

Description: Compiles .less files into .css files

File Type: LESS files

Scope: Project Files

Program: C:\Users\Owner\AppData\Roaming\npm\lessc.cmd

Arguments: --no-color $FileDir$\$FileName$

Working Directory: your working directory

Output Paths to Refresh: $FileDir$\$FileNameWithoutExtension$.css