이번 주에 더 나은 부분을 사용하여 전체 magento-blank테마 를 복사하지 않고도 사용자 정의 테마를 올바르게 작성하고 존재하지 않는 LESS / CSS를 확장하는 방법에 대한 명확한 가이드를 찾으려고 노력했습니다 .

공식 문서는 변수 재정의에 대한 기본 사항을 제공하지만 용도가 제한적입니다. 예를 들어 Sonassi와 같은 기존 가이드는 Magento 2의 베타 릴리스를 기반으로 한 것으로 보입니다.

Magento 1부터는 LESS 작동 방식과 Magento가 모든 파일을 CSS로 수집하는 방법을 파악하는 약간의 학습 곡선이있었습니다. 가이드를 파헤 치고 수정해야 할 파일에 대한 명확한 대답을 얻는 데 시간이 걸렸으며 언제 내가 미래의 사용자 (및 미래의 나)가 LESS를 빨리 사용할 수 있도록 찾은 내용을 공유 할 것이라고 생각했습니다. 마 젠토 2.

magento2 theme less

— 앤디
소스

참고 1 : 이것은 항상 확장한다고 가정합니다 magento-blank.

주 2 : <theme-dir>입니다app/design/frontend/Vendor/theme/

기본 사항 : 기본 변수 변경

(tl; dr의 경우 결론으로 건너 뛰기)

내가 찾은 대부분의 가이드는 LESS 테마에서이 단계 만 다루므로 짧게 유지하려고합니다. Magento 2에는 테마의 일반적으로 사용되는 측면을 정의하는 기본 변수 세트가 있습니다. 색상, 글꼴, 페이지 제목 스타일 등이이 변수에 정의되어 있습니다.

여기에는 <magento-root>/lib/web/css/source/lib/variables/직관적으로 명명 된 LESS 파일이 많이 있습니다. 이들 각각에서 Magento 2의 많은 공통 요소에 대한 변수에 지정된 값을 찾을 수 있습니다.

이러한 변수를 변경하려면에 파일을 작성하십시오 <theme-dir>/web/css/source/_theme.less. 예:

@newPrimary: #1980fe;
@primary__color: @newPrimary;


@link__color: @newPrimary;
@link__visited__color: lighten(@link__color, 10%);

기술적으로 CSS 또는 LESS를 여기에 넣을 수 있으며 사이트에 성공적으로 적용됩니다 (그러나 그렇게하지는 마십시오). 이것이 어떻게 작동하는지 설명하겠습니다.

새로운 CSS 파일 추가

모든 템플릿 페이지의 헤드에 새로운 CSS를 추가 할 수 있습니다.

작성 <theme-dir>/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/myStyle.css" />
        </head>
    </page>

그런 다음 새로운 CSS 또는 LESS로 파일을 만듭니다.

<theme-dir>/web/css/myStyle.less. 여기서 LESS 또는 CSS를 작성할 수 있습니다.

기존 스타일 재정의

Magento 2 LESS가 단순히 새로운 CSS 파일을 추가한다고해서 쉽게 대체되지는 않습니다. 이것이 내가 길을 잃기 시작한 곳이며, Magento 2가 어떻게 LESS 파일을 찾는 지 설명 할 것입니다.

기본적으로 Magento 2에는 다음 파일이 포함됩니다 (최종적으로 되돌아갑니다).

<Magento_Blank_theme_dir>/web/css/styles-m.less //Mobile Styles
<Magento_Blank_theme_dir>/web/css/styles-l.less //Desktop enhancements
<Magento_Blank_theme_dir>/web/css/print.less //Print Styles

이러한 파일에는 더 많은 LESS 파일이 포함 된 다른 LESS 파일이 포함됩니다 (가져 오기). 그리고 이것은 다른 가이드들이 나에게 도움이되지 않는 곳이며, 내가 찾은 것을 최선을 다해 설명하겠습니다.

소스 / lib 매직

에는 styles-m.less다음 줄이 @import 'source/lib/_responsive.less';있습니다.. 테마에 source/lib디렉토리 가 없다는 것을 알 수 있습니다 magento-blank. Magento 2 스타일은 궁극적으로로 넘어갑니다 <magento-root>/lib/web/css/. 거기 있습니다 source/lib/_responsive.less.

테마 에서 가져온 파일로 _theme.less인해 사용하는 변수를 사용할 수 있습니다 . 참고 : 기본 테마에서 빈 파일입니다. 이것이 중요한 이유를 알아 보려면 계속 읽으십시오.source/libmagento-blank _theme.less

"자동으로 포함 된"LESS 파일

내가 찾은 몇 가지 가이드는 <theme-dir>/web/css/_styles.lessMagento가 자동으로 해당 파일을 찾고 포함하기 때문에 만들 수 있다고 주장했습니다 . 나는 이것이 나쁜 조언이라는 것을 알았습니다.

를 만들면 <theme-dir>/web/css/_styles.less사이트가 중단됩니다. theme-frontend-blank/web/css/styles-m.lessimports _styles.less. 차례로 3 개의 .less 파일을 더 가져오고 각 파일은 훨씬 더 .less 파일을 가져옵니다.

을 생성하면 _styles.less재정의하는 것입니다. 재정의 _styles.less하면 가져 오는 모든 파일과 해당 파일이 가져 오는 모든 파일 등이 재정의됩니다.

참고 _theme.less: 이 파일은 기본 테마에서 비어 있으므로 테마를 기본으로 설정하는 경우 간단하게 작성하고 추가하기 시작하는 것이 안전합니다. 그러나 이미 기본값을 확장하는 테마를 확장하는 경우 기회_theme.less가 이미 사용됩니다. 다시 작성하면 대체됩니다.

마법의 @magento_import

에서 styles-m.less당신 주석 라인의 몇 가지를 볼 수 있습니다 :

//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets

이 줄은 실제로 주석 처리되지 않았습니다! Magento 2는로 시작하는 라인을 특별하게 처리합니다 //@magento_import. 이 줄은의 파일에만 포함될 수 있습니다 <theme-dir>/web/css.

위의 줄은 주어진 패턴을 따르는 테마 내에 파일을 포함하도록 Magento 2에 지시합니다. 따라서 위의 줄은 자동으로 다음을 포함합니다 :

'<theme-dir>/Magento_Catalog/web/css/source/_widgets.less';
'<theme-dir>/Magento_Catalog/web/css/source/_module.less';

'<theme-dir>/Magento_Cms/web/css/source/_widgets.less';
'<theme-dir>/Magento_Cms/web/css/source/_module.less';

'<theme-dir>/Magento_Reports/web/css/source/_widgets.less';
'<theme-dir>/Magento_Reports/web/css/source/_module.less';
...and so on

파일 이름을 추가 _widgets.less하고 _module.less 합니다 자동으로 발견하고 포함 할 경우에도 자사의 새로운 모듈 또는 이미 해당 파일이없는 모듈.

Magento-Blank에는 대부분의 모듈에 해당 파일이 포함되어 있으며이 방법을 사용하려면 원본을 복사하여 붙여 넣어야합니다 (완전한 다시 쓰기를 수행하지 않는 한).

결론

(읽기 : 사용하지 마십시오 _styles.less).

요소의 CSS를 변경하려고 할 때 해당 스타일이 정의 된 파일을 찾으려면 최선을 다하고 싶을 때가 있습니다. 때때로 변수를 변경하기 만하면됩니다 _theme.less. 대부분의 시간은, 내가 의심, 당신은 단순히 복사 - 붙여 넣기에 필요 _module.less하거나 _widgets.less테마로하고 변경 한.

새 모듈을 작성했거나 새 HTML 요소가있는 경우 LESS 파일을 작성하여 <head>모든 페이지 에 별도로 포함시켜야 합니다.

복잡한 경우에는 새 @import또는 을 만들어야합니다 @magento_import. 당신이하고있는 일에 적합한 가장 낮은 자식을 찾고 싶기 때문에 불필요한 파일을 복사하여 붙여 넣거나 혼란스러운 @import줄을 추가 하지 않습니다.

— 앤디
소스

또한, 자신의 요소를 만들 때 (모든 페이지에로드되지 않은 경우) 별도의 CSS 파일을 헤드에 포함시키는 것이 더 좋습니다. 나는 모든 페이지에 모든 스타일을 추가하는 마 젠토 테마의 팬이 아닙니다.

— 벤 크룩

자세한 답변처럼. // @magento_import 명령어를 사용하면 gulp에 포함 된 것과 같이 타사의 컴파일러를 사용할 수 없다는 점에주의하십시오.

— Robert Egginton

좋은 설명! 감사합니다. Magento 2.1.0을 사용 var/view_preprocessed/css/frontend/VENDOR/THEME/loca_LE/css/*

— 중이며

야! app / design / frontend / Vendor / theme / css / source에 _extends.less에 대한이 새 클래스를 새 코드에 추가하려고합니다. 그러나 이것은 작동하지 않습니다. 제발 도움말 magento.stackexchange.com/questions/151940/...

— Sylon

Metnion_extend.less

— Stevie G

커스텀 테마에서 LESS를 어떻게 재정의합니까?