EC-CUBEのテンプレート作成にSASSやLESSを使う方法

Pocket

EC-CUBEのテンプレートを作成するときは基本的にCSSを使っていたのですが、最近CSSの親玉、LESSの書き方・使い方を書いて以来SASSやLESSを使ってスタイリングをしてみようと思いました。

EC-CUBEではテンプレートフォルダ内にあるcssを変更しても適用されず、別の場所にあるcssを変更する必要があります。詳しい方法は以下の通り。

EC-CUBEでSASS・LESSを使う方法

EC-CUBEのcssはhtml->user_data->packages->template-name内にあります。

ここにsassやlessのフォルダを入れてしまえばOKです。

でも開発時にいちいち別のフォルダまで飛んでいくのはめんどくさいのでこんな感じでショートカット(Macだとエイリアス)を作成してテンプレートフォルダに入れておきます。
ec-cubeでsassやlessを使う方法
また、sassやlessを使う際に便利なツールとして最近メジャーアップデードされたcodekitがありますが、このツールも合わせて使うと作業が捗ります。

codekitで読み込むのはhtml->user_data->packages->template-name内のフォルダになります。
ec-cubeでcodekitを使う

テンプレート作成時の注意点

テンプレートとして書き出す際には注意が必要です。上記の方法でcssを変更してもテンプレートとして書き出されません。

なので、user_data側のcss(jsやimgも?)をSmarty->templates側の_packagesフォルダ内にコピペする必要があります。

こうすれば無事にテンプレートの作成が可能になります。