EC-CUBE SCSS Converter
EC-CUBE のフロントエンド Twig テンプレートから、構造化された SCSS ファイルを自動生成する Visual Studio Code 拡張機能です。
機能
Twig テンプレートから SCSS を生成（ファイル単位）
エクスプローラーで .twig ファイルを右クリックし、EC-CUBE: Convert Twig to SCSS (File) を選択すると、そのテンプレートに対応する SCSS ファイルを生成します。
- ファイル名をもとにセレクターを生成します。
- Twig の
{% block %} タグを解析し、ブロック名をネストしたセレクターとして展開します。
- Block ディレクトリ（
/Block/）のファイルはページラッパーなしの部品用 SCSS を生成します。
Twig テンプレートから SCSS を生成（フォルダ単位）
エクスプローラーでフォルダを右クリックし、EC-CUBE: Convert Twig to SCSS (Folder) を選択すると、フォルダ内の対象 Twig ファイルをまとめて変換します。
SCSS の出力先
生成された SCSS ファイルは html/template/<テーマ名>/assets/scss_new/ 以下に出力されます。
| 種別 |
出力先 |
| ページテンプレート |
scss_new/<ページ名>.scss |
| Block テンプレート |
scss_new/components/<ブロック名>.scss |
初回実行時には以下の基盤ファイルも自動生成されます。
| ファイル |
説明 |
style.scss |
全ファイルをまとめてインポートするエントリーポイント |
eccube.css / eccube_original.css |
EC-CUBE 標準 CSS のコピー |
foundation/_variables.scss |
カラー・フォントなどの変数定義 |
foundation/_mixins.scss |
共通ミックスイン |
foundation/_common.scss |
全ページ共通スタイル |
対応ディレクトリ
以下のパスにある Twig ファイルが変換対象です。
| パス |
説明 |
app/template/<テーマ>/index.twig |
トップページ |
app/template/<テーマ>/Cart/ |
カートページ |
app/template/<テーマ>/Contact/ |
お問い合わせページ |
app/template/<テーマ>/Entry/ |
会員登録ページ |
app/template/<テーマ>/Forgot/ |
パスワード再設定ページ |
app/template/<テーマ>/Help/ |
ヘルプページ |
app/template/<テーマ>/Mypage/ |
マイページ |
app/template/<テーマ>/Product/ |
商品ページ |
app/template/<テーマ>/Shopping/ |
購入フローページ |
app/template/<テーマ>/Block/ |
ブロックテンプレート |
app/template/user_data/ |
ユーザーデータテンプレート |
user_data テンプレートの扱い
user_data ディレクトリのファイルは特定のテーマに属さないため、変換時にテーマ選択ピッカーが表示されます。html/template/ 以下にテーマディレクトリが複数ある場合は一覧から選択でき、1 つしかない場合は自動選択されます。
使い方
- エクスプローラーで
.twig ファイルまたはフォルダを右クリックします。
- EC-CUBE: Convert Twig to SCSS (File) または EC-CUBE: Convert Twig to SCSS (Folder) を選択します。
user_data ディレクトリのファイルの場合は、表示されたピッカーから出力先テーマを選択します。html/template/<テーマ>/assets/scss_new/ 以下に SCSS ファイルが生成されます。
動作要件
- Visual Studio Code 1.85.0 以降
- EC-CUBE 4.x の標準的なプロジェクト構造
リリースノート
0.0.3
- README を日本語に書き直しました。
- バージョンを 0.0.3 に更新しました。
0.0.2
user_data ディレクトリのテンプレートに対応しました。テーマ選択ピッカーを追加し、html/template/ 以下の既存テーマを自動検出します。- フォルダ単位の一括変換コマンド（Convert Twig to SCSS (Folder)）を追加しました。
0.0.1
- 初回リリース。
.twig ファイルの右クリックから SCSS ファイルを生成するコマンドを追加しました。- ページテンプレートおよび Block テンプレートの変換に対応しました。
style.scss・変数・ミックスイン・共通スタイルなどの基盤ファイルを自動生成する機能を追加しました。
ライセンス
MIT
| |
