CODEWITHSUNDEEP
cssintellij-idealess
zack
zack

Reputation: 3198

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

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?

Upvotes: 13

Views: 9021

Answers (5)

EpicPandaForce
EpicPandaForce

Reputation: 81539

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

Upvotes: 0

SharkAlley
SharkAlley

Reputation: 11659

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.

Upvotes: 14

trailing slash
trailing slash

Reputation: 891

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.

Upvotes: 3

Andy Dvorak
Andy Dvorak

Reputation: 491

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:

LESS Compiler project settings window

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.

Upvotes: 14

CrazyCoder
CrazyCoder

Reputation: 401915

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.

Upvotes: 6

Related Questions