Sass(scss)の利用方法

EC-CUBEのCSSは、Sass(scss) を使用して記述されています。

  1. scssのディレクリ格納場所
  2. scssの各ディレクトリとファイルについて
  3. Sass(scss)のビルド方法

Sass(scss)のディレクリ格納場所

  • Sass のソースコードは、以下のディレクトリに格納されています。
[html]
 └─ [template]
     └─ [default] # 管理画面はadminになります
         └─ [assets]
             ├─ [css]
             └─ [scss]

scssの各ディレクトリとファイルについて

scssディレクトリ内はメンテナンスしやすいように構成されております。
コンポーネント設計及びCSSの記述方針についてはFLOCSSルールを採用しております。
スタイルガイド も合わせてご参照ください。

[assets]
 ├─ [css]
 │    ├─ style.css     # 読み込まれているCSS ←ビルドして書き出される先
 │    └─ style.min.css # 軽量版CSS ←ビルドして書き出される先
 └─ [sass]
      ├─ [component]   # ベースとなる最小モジュール（部品）が格納
      ├─ [project]     # トップページやヘッダーやフッターなど格納
      ├─ [mixins]      # 再利用スタイルの設定が格納
      ├─ [sections]    # 上書き用
      └─ style.scss    # 各scssファイルがimportで読み込まれているファイル

  • component
    見出しやボタンなど、ベースとなる最小モジュール（部品）が格納されています。
    スタイルガイド 1-9までの項目

  • project
    ヘッダーやフッター、トップページで使用されているモジュール（部品）が格納されています。
    スタイルガイド 11-22までの項目

  • mixins
    再利用や複数の場所で呼び出しするスタイルの設定が格納されています。

  • sections
    componentやprojectのCSSクラスを上書きする際にご利用ください。
    ご利用の際はstyle.scssに以下のコードを追記ください。

@import "sections/components";
@import "sections/projects";
  • style.scss
    各ディレクトリのCSSが @import で読み込まれているscssファイルです。
    こちらのstyle.scssが、style.cssやstyle.min.cssに変換されます。

スタイルガイドについて

EC-CUBEでは、CSSやHTMLの設計指針やコーディングルールを確認できるよう、 スタイルガイド を用意しています。 詳しくは以下を参照ください。

Sass(scss)のビルド方法

  1. ビルド環境の準備
  2. EC-CUBE4.0.3までのビルド方法
  3. EC-CUBE4.0.4でのビルド方法

ビルド環境の準備

EC-CUBE内に組み込まれている Gulp を使用したビルド方法をご紹介いたします。
前提として Node.js公式サイト より、 Node.js をインストールが必要です。

  • Node.js
    GulpはNode.jsをベースに作られているので、Gulp動かす為に必要となります。
    ※最新のNode.jsでは、Gulpのタスク実行時にエラーが出る場合があります。

  • Gulp
    SassファイルをCSSに変換に利用されます。
    EC-CUBE4.0.3まではGulp3、4.0.4からはGulp4が導入

1.Node.js をPCへインストールしてください。

Node.js公式サイト よりダウンロードしPCへインストールしてください。
Node.jsがインストールされているかは、以下のコマンドで確認できます。

node -v

2.ec-cube_rootディレクトリへ移動
package.json、gulpfile.jpファイルが格納されているroot階層へ移動します。

cd path/to/eccube_root # path/to/eccube_rootの部分はEC-CUBEのディレクトリパスをご指定ください

3.node_modulesディレクトリが生成します。

下記コマンドを実行して、上記移動したディレクトリにnode_modulesが生成されている事を確認してください。

npm install # node_modulesディレクトリが生成

EC-CUBE4.0.3でのビルド方法

以下のコマンドでscssをCSSに変換します。

npm run build # scssをstyle.cssとstyle.min.cssに書き出します

変換されたcssは html/template/{admin,default}/assets/css/ に出力されます。
style.cssとstyle.min.css（改行など省略した軽量版）が出力されます。

EC-CUBE4.0.3までデフォルトテンプレート以外を適用している場合の注意点

テンプレートをdefault以外に変更されている場合、gulpfile.jsの値を変更する必要があります。
eccube_root/gulpfile.js 内の以下のdefaultの部分を変更してください

[ec-cube_root]
 └─ gulpfile.js # srcPatternの設定を変更

const srcPattern = [
    'admin',
    'default' //defaultの部分を適用中のテンプレート名に変更
];

※EC-CUBE4.0.4からは上記設定は必要なくなりました。
※デザインテンプレートによっては、Sassの導入・格納場所が異なる場合がありますので、
ご購入されたデザインテンプレートのマニュアルなどをご参照ください。

EC-CUBE4.0.4以降でのビルド方法

4.0.4から新たに、自動ビルドであるwatch機能が追加されました。
【注意】Windowsの方は一部コードの修正が必要になります

設定ファイルは gulp/config.js にありますので先に設定をしておいてください。

npm run build # scssをstyle.cssとstyle.min.cssに書き出します 

npm run watch # scssの更新を監視、自動でstyle.cssとstyle.min.cssに書き出します

npm run start # 監視、自動書き出し＆ブラウザ自動更新

watchやstartの監視を停止する方法:「Ctrl」+「C」のショートカットキー

変換されたcssは html/template/{admin,default}/assets/css/ に出力されます。
style.cssとstyle.min.css（改行など省略した軽量版）が出力されます。

【注意】Windowsの方は一部コードの修正が必要になります

4.0.4パッケージ版のWindows環境でSassビルド時にstyle.cssが正しく書き出されない不具合あり、
Gulpfile.jsの以下の２箇所を変更お願いします。※GitHubの最新コードは修正済み

[ec-cube_root]
 └─ gulpfile.js # Sassのビルド設定が書かれているファイルを一部変更してください。

gulpfile.jsの90行目と115行目の２箇所のコードを変更してください。

path.dirname = path.dirname.replace('/scss', '/css') # 変更前コード

path.dirname = path.dirname.replace(/scss$/, 'css') # 変更後コード

更新日時: