TL : DR
기본 루마 또는 공백 테마를 사용하여 빌드합니까? 아니면 다른 것?
부모 테마를 선언하는 것은 선택 사항입니다. 부모를 선언하지 않으면 XML 및 템플릿 파일은 제공하지만 스타일은 제공하지 않는 모듈 (예 : Magento_Catalog)로 대체됩니다.
테마를 개발하는 데 도움이되는 확장 기능을 사용합니까?
SCSS 및 GULP 작업을 선호함에 따라 Frontools 및 SCSS blank 테마를 사용 합니다. 기본 Grunt / LESS worflow를 처리 할 때 발생하는 많은 스트레스를 제거합니다.
테마를 처음부터 개발할 때 따라야 할 단계는 무엇입니까?
- 테마 선언
- 부모 테마 CSS 제거 (필요한 경우)
- 나만의 CSS / LESS / SCSS 추가
내 개인적인 견해는 당신이 이것을 정확히 당신이 원하는 것에 맞게 조정할 수 있기 때문에 처음부터 자신의 '빈 테마'를 만드는 것이 가장 좋습니다.
이것은 처음부터 테마를 만드는 방법입니다. 공급 업체 및 테마 이름으로 NewStore / default를 사용했습니다.
이제 더 자세한 답변을 얻으려면 ...
테마 만들기 (공식 문서에 따라)
공식 문서에 따라 테마 만들기
선택적으로 부모 선언
app/design/frontend/NewStore/default/theme.xml당신 안에서 부모 테마를 선언할지 여부를 선택할 수 있습니다.이 예제에서는 3 행을 생략 <parent>Vendor/theme</parent>했으므로 부모 테마가 없습니다 . 즉, 모든 템플릿 / 레이아웃 파일은 Blank 또는 Luma가 아닌 모듈 자체에서 제공되며 Blank 테마에 추가되므로 테마 스타일이 없습니다.
내 theme.xml은 다음과 같습니다.
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>NewStore default</title>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
스타일을 제거하고 (부모 테마를 설정 한 경우) 고유 한 CSS를 추가하십시오.
blank 또는 Luma를 부모로 설정하면 CSS 파일이로드되지 않도록해야합니다. 이를 위해 app/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xml다음 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>
<!-- Remove blank/luma theme styling if you declared a parent -->
<remove src="css/styles-m.css" />
<remove src="css/styles-l.css" />
<remove src="css/print.css" />
<!-- Add your own CSS files -->
<css src="css/styles.css" />
</head>
</page>
이 제거합니다은 styles-m.css, styles-l.css및 print.css빈 테마 추가. 또한 styles.css를 CSS의 기반으로 추가합니다.
부모를 지정하지 않은 경우 <remove />위 코드에서 3 개의 태그를 제거 할 수 있습니다 .
나만의 CSS 추가
이제 테마를 꾸밀 수는 있지만 원하는 것은 LESS보다는 Sass의 팬이므로이 파일을 추가했습니다. app/design/frontend/NewStore/default/web/css/styles.scss
여기에서 배경색을 변경 하여이 작동을 증명하는 것이 이상적입니다. 이상적으로는 다른 Sass / Less 파일을 가져 오기 위해이 파일 만 사용하는 것이 좋습니다.
결과
내가 방금 한 결과는 스타일이없는 테마입니다 (아름다운 녹색 배경 제외). 마 젠토 (일부 작업하기 어려운) 스타일링으로 작업하지 않고 테마를 꾸밀 수 있습니다.
팁
SCSS로 작업하기를 원 하고 처음부터 테마를 만들 시간이 없다면 Snowool Apps에서 Frontools 와 SCSS blank 테마를 모두 사용하는 것이 좋습니다 .
Magento의 프론트 엔드 코드를 사용하는 데있어 가장 실망스러운 점은 스타일이 얼마나 구체적인지에 대한 것입니다.이를 피하기 위해 자신의 스타일을 작성할 때 BEM 이름 지정 규칙을 사용하는 것이 좋습니다 .
또한 Luma / Blank 작업에 익숙한 개발자가 처음부터 제작 된 테마로 작업했다면 예상과 다르게 작동하는 것을 알 수 있습니다.