lessファイルをコンパイルする

今日は、lessファイルのコンパイル方法について。

Macでやります。
node、npmをインストールしましょう。
nodeはバージョンによって、動作が異なることがあるので、
バージョン管理できるようnvmをインストールして、nodeを管理します。

分かりやすく説明してくれてるページがあるので、こちらを参考にするとgoodです。
Macにnvm + Node.jsをインストールする

これで準備OK。

続いて、コンパイルするライブラリ「lessc」をインストールします。
#sudo npm install -g less

-gはグローバル指定です。
グローバルにインストールしておけば、どのユーザーでも使用できます。
#which lessc
/Users/ユーザー名/.nvm/versions/node/vバージョン/bin/lessc

nvmで指定しいてるバージョンにインストールされます。

#lessc -v
lessc 2.7.2 (Less Compiler) [JavaScript]

バージョン確認。

あとは、ターミナルからlessファイルのあるディレクトリ直下に移動して、
lessc -x lessファイル.less cssファイル.css -source-map=base.css.map

で、同階層にコンパイルされる。
-xはminify
-source-map=base.css.mapで、mapファイル出力

詳細なオプションは、lessc -hで参照できます。

てことで、これで無事にcssファイルとしてコンパイルできました。
お疲れ様でしたー!

2017/10/10 追記
-xオプションは非推奨になってますね。
The compress option has been deprecated. We recommend you use a dedicated css minifier, for instance see less-plugin-clean-css.
て表示されると思います。
コンパイルはできてますが、気持ち悪いので、推奨されている方法でやります。
使え、と言われておりますless-plugin-clean-cssをインストールします。
npm install -g less-plugin-clean-css
で、–clean-cssオプションで圧縮します。
lessc –clean-css form_sended.less form_sended.css -source-map=form_sended.css.map

はい。今度こそお疲れ様でした!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です