Magento1 rwd テーマ ( sass )から Magento2 のテーマ ( less ) に移行する : 初学者向け

9121 ワード
Magento2 less scss Sass Magento Sass テキストリンク

この記事は、Magento Advent Calendar 2017 17日目 です。

はじめに

とあるサービス(リリース前)をMagento1からMagento2(v2.2.1予定)へ移行することになり、
それに伴うフロントスタイル全般の移行担当になりました。
※2017/12/17時点未着手

ゴール

今回はフロントのスタイル移行のみに焦点を当てます。
それに伴うToDoに関し、調べた結果をまとめることがゴールです。

ToDo

  1. sassからlessへ記法を変換する方法を調べる ( 弊社ではM1の rwdテーマ( scss記法 )を使用していたため )
  2. magento1系、2系のディレクトリ構成の違いを知る
  3. magento2系のless適用方法を理解する

sassからlessへ記法を変換する方法を調べる

lessに馴染みがなかったため、lessとsassの記法の違いを調べました。
主なものは以下です。

sassにあり、lessにないもの

sassには for文、while文などの関数が用意されています。
lessはsassと比較してそのような関数が少ないです。
for文、while文はありません。

変数の記載方法の違い

変数の先頭に用いる記号が異なります。
sass : $
less : @

その他記載方法の違い

lessの方がcssに近い記載方であり、
sassにある @mixinのような機能の記法が異なります。

sassサンプル(弊社では主にscss記法で記載しています)
@mixin border-radius($radius: 4px) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -o-border-radius: $radius;
  -ms-border-radius: $radius;
  -khtml-border-radius: $radius;
  border-radius: $radius;
}

.section { @include border-radius; }
.topic { @include border-radius(2px); }
lessサンプル
.border-radius(@radius: 4px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -o-border-radius: @radius;
  -ms-border-radius: @radius;
  -khtml-border-radius: @radius;
  border-radius: @radius;
}

.section { .border-radius; }
.topic { .border-radius(2px); }

サンプル引用元:
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較

参考:
SCSS(Sass)とLESSの比較とその結果
SassとLESSの違い ー CSSプリプロセッサ入門 ー

記法の置換方法

他にも記法の違いはありますが、抜けが出そうだったので、
sassをless記法に置換するツールはないか、探してみましたが、
私のググり力でひっかかるものがなく、、、

ですが！自分で作成されている方がいました。
→ gulpを使ってlessをscssに変換してみた

私が行いたいこととは反対ですが、ここに記載されている点を中心に置換できそうです。
(そして網羅できない部分があったら追加すればいい。。)

magento1系、2系のディレクトリ構成の違いを知る

magento1系では.scssファイル群の格納場所は以下でした。
themeの作成方法は割愛いたします。

skin/frontend/{theme}/{custom directory}/scss

magento2では以下のように変更されています。

app/design/frontend/{Vender}/{theme}/web

このweb/cssフォルダの中にフロント関係のソースを入れればいいんですね！

magento2系のless適用方法を理解する

まずmagentoにデフォルトで適用されているlessについての理解するためには
@kzkiq2nd さんがお書きになられた、Magento Advent Calendar 2015の記事Magento2のスタイル（LESS）変更の方法概要がとてもわかりやすいです！

基本は

Magento UI libraryのスタイル + モジュール用のLESS + 独自スタイル

の順に適用されるそうなので、今回の場合、独自スタイルをM1→M2移行後に モジュール用のLESS へ必要部分の書き出しを行えば良さそうです。

独自スタイルの適用方法

上書きではないですが、
新しく作成したcss(less)を読み込むには以下のように記述します。

app/design/frontend/{Vender}/{theme}/Magento_Theme/layout/default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/custom.css" />
        <link src="js/dummy.js"/>
    </head>
</page>
app/design/frontend/{Vender}/{theme}/web/css/custom.less
/* 変更内容を記載 */
app/design/frontend/{Vender}/{theme}/web/js/dummy.js
// magento2でjsファイルがないと怒られるバグがあるため、空のjsファイルを作成する

上書き方はまた調べ、追記します。

モジュール用のLESSの上書き方法

公式ドキュメントなどを読むと、
1. app/design/frontend/{Vender}/{theme}/{Vendor_Module}を作成する
2.app/design/frontend/{Vender}/{theme}/{Vendor_Module}/web/css/source/_module.lessを上書きする
ことで、各moduleごとの_module.lessを上書きできるようです。

変更内容の反映方法

  1. var/view_preprocessing var/cache pub/static 以下の.htaccsessを除くファイルを削除する
  2. bin:magento setup:static-content:deployコマンドを叩く

lessのコンパイルのためにnode.jsの設定ファイルを作成して、、、等、不要なのですね！

参考：
How do you override LESS in a custom theme?
How CSS and LESS files are preprocessed and how to debug them
Deploy static view files

番外編 : 管理画面のスタイル変更の場合

app/design/adminhtml/{Vender}/{theme}を作成すれば、管理画面のstyleも上書きできそうですが、まだ試せていません。。
参考：　
Create an Admin theme

おわりに

完全なる予習のため、曖昧な点もあり、
移行終了後、記載を直す部分があるかと思います。ご容赦ください。
間違い等ございましたら、ご指摘いただけますと嬉しいです。
駄文ですが、最後までお読みいただきありがとうございました。