Mac上のEclipse(4.4 Luna)でLessの編集&CSSへのコンパイル

Webデザインを行う際に、知ってしまったらもうCSSへは戻れないのがLessやSassなどのCSSプリプロセッサです。

最近はLessのコンパイルまでやってくれる便利なエディタがいろいろあるようですが、PHPやらJavascriptやらを全部自分で作っているような場合はEclipseで完結した方が便利です。

Eclipse上でLessを扱うのなんて当たり前の時代かと思いきや、以外と引っかかったのでメモしておきます。

Step1 Eclipseへのプラグインインストール

・Xtextのインストール(Lessプラグインの動作に必要とのこと)

「新規ソフトウェアのインストール」で次の更新サイトを指定してインストール

http://download.eclipse.org/modeling/tmf/xtext/updates/composite/releases/

・Eclipse plugin for LESSのインストール

同じく、次の更新サイトを指定してインストール

http://www.normalesup.org/~simonet/soft/ow/update/

参考

http://news.mynavi.jp/column/ide/132/

Step2 Node.jsおよびLessコンパイラのインストール

・Node.jsのインストール

次のサイトの「INSTALL」からインストーラーをダウンロードしてインストール

https://nodejs.org/#download

・lesscのインストール

ターミナルで次のコマンドを入力

npm install less

・何かの時にターミナルから使用できるように、パスに追加 (Eclipseからしか使わない場合はやらなくてもOK)

~/.bash_profileを編集して次を追加(隠しファイルなのでターミナルからviを使うなどしてください)

export PATH=$PATH:~/node_modules/less/bin

Step3 Eclipseでの設定

(各Lessファイルごとに行う必要があります)

「実行」>「実行の構成」で「LESS Compiler」を右クリックして「新規」で実行構成を新規作成。次の項目を設定。

名前:対象のlessファイル名など

LESS command:/Users/yuuki/node_modules/less/bin/lessc
入力ファイル:対象のlessファイルのフルパス
出力ファイル:作成するcssファイルのフルパス
(Set to defaultにチェックがある場合はlessファイルと同じフォルダに作成される)

 

続いて、上部のタブで「環境」を選んで「新規」を押して環境変数設定を行う。

「新規環境変数」画面で、

名前:PATH
値:/usr/local/bin

 

この環境変数の設定が間違っていると

env: node: No such file or directory

というエラーで怒られます。

Step4 Lessの修正

この状態でコンパイルしようとすると、

Unable to interpret argument O0 - if it is a plugin (less-plugin-O0), make sure that it is installed under or at the same level as less

というエラーで怒られます。 どうも、プラグインからLesscを実行する際に、不明な「O0」というオプションが指定されていて、lesscが怒っている様子。

幸い、lesscはスクリプトファイルなので、次の編集を行いって回避します。

1. エディタでlesscを開く
2. 次のSwitch文のdefault:行に移動する

  switch (arg) {
    case 'v':
    case 'version':
    ・・・
    ・・・
    default:   <- ここ

3. default:行の直前に次の2行を追加する

    case 'O0':
      break;

4. ファイルを保存する

これで、lessc が「O0」というオプションを無視するようになりました。

Step5 実際にコンパイルしてみる

他のCやJavaと同じように対象のファイルを開いて、上部の「実行」ボタンを押すなどしてコンパイルする。

Compilation successful.

と表示されて、対象のCSSファイルが生成されればOK

この記事のカテゴリー

css, Eclipse, less, less, PC&システム関係の日記, Webデザイン, プログラム, 開発環境
Top