Magento2でLESSが・・・

あれからずっと(ただしGW期間中は除く。当然よね?)、Magento2についていろいろ調べた。

日本語の情報が少ない中、数少ない日本語のサイトを見よう見まねでやったり自己解決したり・・・。

というか、インストールの時点でトラブりまくっていたが、とにかく、トライアンドエラーでいろいろやってみても壁がどんどんせり立っていく気がしてならない。

 

今回の問題は・・・ズバリ、テーマのカスタマイズ。

壁にはしょっぱなからぶち当たった。

 

Magento2のドキュメンテーション見て、子テーマの作成はなんとかうまくいった。

だが、テストでごくごく単純に上書き用と言われているLESSを書き換えたところで、問題が発生。

 

コンパイルされない・・・だと・・・

 

なんだこれ、Magento2が勝手にやってくれるんじゃないのか。

なんかの間違いかと思い、テーマを切り替えたりしてみたがうんともすんとも・・・。

 

 

とりあえず調べてみると、どうやら、Magento2自体にはLESSのコンパイラは搭載されていないようだ。

コンパイルにGrunt使ってるのは公式ドキュメンテーション見てれば散々分かってたんだが、残念ながらこれ自体にコンパイラは入っていないらしい。設定ファイルはあるけどね。

 

そこで「コンパイラを入れれば解決じゃん」という結論にたどり着いた。

具体的にやった方法は以下。

※以下は子テーマを作成後にやっています。子テーマの作成方法やお作法は、英語なら公式ドキュメンテーション、日本語ならもっともんのすんごい会社さんが記載していらっしゃるのでそちらをご参考にどうぞ。

 

まずはLinuxにNode.jsとnpmを入れる

以下のコマンドで、Node.jsとnpmをインストールする。

(一応、ルートディレクトリで実行している)

yum install nodejs npm

 

npmを利用してgruntcliを入れる

次いで、npmコマンドより、grunt-cliをグローバルにインストールする。

(こちらもルートディレクトリで実行)

npm install -g grunt-cli

 

Magento2インストール先へGrunt環境を設置

※下記は全てMagento2をインストールしたディレクトリで実行しています。

 

Gruntの環境を展開する。

npm install grunt --save-dev

これによりMagento2インストール先のディレクトリの直下に「node_modules」ってディレクトリができる。

 

更に展開後、下記を実行する。

npm install

node_modulesの中にGruntに必要なライブラリが全て展開される。

必要であればアップデートをかけておいてもいいかも。

 

以上が終わったら、dev/tools/grunt/configs/theme.jsに作成した子テーマの情報を記載する。

これについてはLumaとかの記述を参考にして追加すれば大丈夫のはず。

 

正常に設定ができたら、下記を実行。

grunt less:テーマの名前

以上で、カスタマイズしたテーマの上書き用のLESSがコンパイルされる。

 

 

なんつーか、めんどくさいね。Magento2って。

たかがCSSを書き換えるだけでもここまでの手順が必要。

俺がこの会社辞めた後、維持できるやついんのか・・・。

カテゴリ

この記事のコメント

コメントはないです。

コメントを残す

メールアドレスが公開されることはありません。