EC-CUBE SCSS Converter
A Visual Studio Code extension that converts EC-CUBE front-end Twig templates into structured SCSS files. Twig files are never modified except to add a class attribute to the <body> tag when needed.
Features
- Right-click File or Folder in the Explorer to convert
- Theme name is detected automatically from the file path
- For
user_data files and folders, a template picker appears so you can choose which theme's scss_new directory receives the output
- Output is written to
/html/template/<theme>/assets/scss_new/
- When no body id exists, adds
class="folder_filename" to the <body> tag and uses a .class selector
- The top page (
index.twig at theme root) is never modified
- Existing component SCSS files are updated with new selectors — not overwritten
Note: SCSS generation from id selectors (<body id="...">) is not supported. A class-based selector is always used instead.
Supported Paths
| Type |
Path |
| File |
/app/template/<theme>/index.twig |
| File |
/app/template/<theme>/Cart/*.twig |
| File |
/app/template/<theme>/Contact/*.twig |
| File |
/app/template/<theme>/Entry/*.twig |
| File |
/app/template/<theme>/Forgot/*.twig |
| File |
/app/template/<theme>/Help/*.twig |
| File |
/app/template/<theme>/Mypage/*.twig |
| File |
/app/template/<theme>/Product/*.twig |
| File |
/app/template/<theme>/Shopping/*.twig |
| File |
/app/template/<theme>/Block/*.twig |
| File |
/app/template/user_data/**/*.twig |
| Folder |
/app/template/<theme>/(Cart\|Contact\|Entry\|Forgot\|Help\|Mypage\|Product\|Shopping\|Block) |
| Folder |
/app/template/user_data |
Theme Selection for user_data
Because user_data is not tied to a specific theme, the extension shows a template picker when you right-click a user_data file or folder:
Select the target template for user_data SCSS output
▸ default
▸ my_theme
The selected theme determines the output path:
/html/template/<selected_theme>/assets/scss_new/components/_user_data_custom.scss
/html/template/<selected_theme>/assets/scss_new/style.scss ← @use line added here
SCSS Output per File Type
Page templates — wrapped in a selector
// _mypage_index.scss
@use '../foundation/variables' as *;
@use '../foundation/mixins' as *;
.mypage_index {
.ec-definitions {
}
.ec-historyListHeader {
&__action {
}
&__date {
}
}
}
Block templates — no wrapper
// _block_calendar.scss
@use '../foundation/variables' as *;
@use '../foundation/mixins' as *;
.ec-calendarRole {
&__body {
}
}
Generated Structure
/html/template/<theme>/assets/scss_new/
├── style.scss
├── eccube.css
├── eccube_original.css
├── foundation/
│ ├── _variables.scss
│ ├── _mixins.scss
│ └── _common.scss
└── components/
├── _mypage_index.scss
├── _block_calendar.scss
├── _user_data_custom.scss
└── ...
style.scss
@use "eccube.css";
@use "foundation/common";
@use "components/mypage_index";
@use "components/block_calendar";
@use "components/user_data_custom";
_variables.scss
$breakpoint_sp: 768px;
$breakpoint_pc: 769px;
$color_primary: #3C2A21;
$color_accent: #E07B39;
$font_family_base: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
Usage
- Open an EC-CUBE 4.x project in VS Code.
- Right-click a
.twig file or an allowed folder in the Explorer.
- Select EC-CUBE: Convert Twig to SCSS (File) or EC-CUBE: Convert Twig to SCSS (Folder).
- For
user_data, choose the target template from the picker.
- A notification confirms completion.
Requirements
- VS Code 1.85.0 or higher
- EC-CUBE 4.x project structure
Notes
js- prefixed classes are ignored.is- and has- prefixed classes are treated as state modifiers.- All variable and mixin names use snake_case.
- SCSS generation from id selectors is not supported.
Repository
https://github.com/TakashiHishiki/eccube-scss-converter
