メンチカツには醤油でしょ!!

AWS/Java/Node.js/Spreadsheets/Docker/Jenkins/コミュニティ・勉強会レポを主とした技術系ブログ

EclipseでBootstrapを使うときにLESSプラグインを使う

みんな大好きEclipse

EclipseでBootstrapなWebを編集することがあったのでGulp+Sassかと思ったらBootstrapはLESSだったのでプラグインを入れてみた。

前提や環境

・npm導入済
Eclipse Mars (多分ほかでも大丈夫)
Windows (特有の問題があり本文中に解決方法記載あり、Linux系は出ないハズ)

LESSインストール

> npm install less -g

プラグインインストール

ウィンドウ⇒設定
⇒インストール/更新 内の 使用可能なソフトウェア・サイト にて、
下記URLを追加します。
http://download.eclipse.org/modeling/tmf/xtext/updates/composite/releases/
http://www.normalesup.org/~simonet/soft/ow/update/

ヘルプ⇒Eclipse マーケットプレイス を開き
xtextと検索して、Xtext 2.10.0 を、
LESSと検索して、Eclipse plugin for LESS 1.0.19 を入れます。
(バージョンは記載時点)

そのまま実行するとエラー (Windows)

やったー入ったーと思ってEclipse上でそのまま.lessファイルを右クリック⇒実行⇒LESS Compilerを選択すると

Cannot be launched because of an I/O exception
Cannot run program "lessc": CreateProcess error=2, 指定されたファイルが見つかりません。

が出ます。

lesscが実行できないのです。

調べてみるとlessインストール時に作成されるWindows用の
"C:\Users\ryoichi_obara\AppData\Roaming\npm\lessc.cmd"
Eclipse LESS Compilerからは参照できていない模様。

ということで、実行の構成をします。
Eclipseメニュー⇒実行⇒実行構成をクリック。

f:id:ryoichi0102:20161114182959j:plain

ここでLESS command: の所に上記cmdのパスを設定してあげます。
ついでにVerbose messagesやStrict importsも必要に応じてチェック。
そして、Use this launch configuration as defaultをチェックして
適用をクリックします。
また、ここで適用して実行しても引数が渡されてなくエラーなので、ここではそのまま閉じます。

f:id:ryoichi0102:20161114190039j:plain

これでless.cmdは呼び出せるようにはなるので、今度こそ
*.lessを右クリック⇒実行⇒LESS Compilerをクリックすると…

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
A failure occurred when running the LESS compiler, see above error message.

というエラーが出ます。

f:id:ryoichi0102:20161114190634j:plain

"C:\Users\ryoichi_obara\AppData\Roaming\npm\node_modules\less\bin\lessc"
の102行目あたりにswitch文があるので、これを

switch (arg) {
    case 'O0':
    case 'O1':
    case 'O2':
        break;
    case 'v':
    ・
    ・

となるようにcaseを追加します。

これで、晴れてコンソールに
Compilation successful.
が出て成功です。

参考

github.com

stackoverflow.com

qiita.com