最近、WordpressのRoots Themeを触っているのですが、その中でlessが使われていたのでそのメモ
|
1 2 3 4 5 |
$ sudo gem install less Successfully installed libv8-3.3.10.4-x86-linux Successfully installed therubyracer-0.9.9 Successfully installed commonjs-0.2.0 Successfully installed less-2.0.9 |
lesscの場所を確認
|
1 2 3 4 |
$ locate lessc /var/lib/gems/1.8/bin/lessc /var/lib/gems/1.8/gems/less-2.0.9/bin/lessc /var/lib/gems/1.8/gems/less-2.0.9/lib/less/js/bin/lessc |
コマンドを入力させやすくしておく
|
1 |
$ sudo ln -s /var/lib/gems/1.8/bin/lessc /usr/bin/ |
: Could not find RubyGem less と出てエラー
|
1 2 3 4 5 |
$ lessc hoge.less > hoge.css /usr/lib/ruby/1.8/rubygems.rb:779:in `report_activate_error': Could not find RubyGem less (>= 0) (Gem::LoadError) from /usr/lib/ruby/1.8/rubygems.rb:214:in `activate' from /usr/lib/ruby/1.8/rubygems.rb:1082:in `gem' from /usr/bin/lessc:18 |
調べてみると、sudoでインストールしたので、lesscのコマンドもsudoで実行しないといけないらしい。。。
|
1 |
$ sudo lessc hoge.less > hoge.css |
既に、Rubyの開発環境はrvmで導入済みの状態です。
せっかくなので、Roots Themeのlessでのcssを書き出しもメモしておきます。
|
1 2 3 4 5 |
$ cd ./wp-content/themes/roots/css/less 全体 $ sudo lessc bootstrap.less > bootstrap.css レイアウト系 $ sudo lessc responsive.less > bootstrap-responsive.css |
ちなみに、上のRoots Themeは、標準では、css/の中にあるcssを読み込むんですが、下記のやり方だとlessの中に書き出されます。
|
1 2 |
$ sudo lessc ./less/bootstrap.less > bootstrap.css $ sudo lessc bootstrap.less > ../css/bootstrap.css |
上記のコマンドを試したけどダメだったので、./inc/roots-actions.phpを書き換えました。