_module.less와 _extend.less의 차이점


22

사용하여 테마를 확장 사이에 어떤 차이가 있나요 _module.less_extend.less? 모듈 / 테마를 확장 할 때 가장 좋은 방법은 무엇입니까?

내 첫 번째 생각은 _module.less새 모듈을 스타일링하거나 모듈을 _extend.less확장 할 때 사용하는 것이 더 낫다는 것 입니다. 그러나 루마는 _module.less빈 테마를 확장 할 때 이론이 창 밖으로 나왔을 때 사용합니다.

그들 사이에서 볼 수있는 유일한 차이점 _module.less은 반응 형 라이브러리 전에 가져오고 _theme.less그다음으로 _extend.less가져 오는 곳 입니다.

이것이 그들이 가져온 주문입니다 vendor/magento/theme-frontend-blank/web/css/styles-l.less

//
//  Blank theme desktop styles
//  _____________________________________________

//  These desktop styles are added to mobile

//
//  Global lib + theme styles
//  ---------------------------------------------

@import '_styles.less';
@import (reference) 'source/_extends.less';

//
//  Magento Import instructions
//  ---------------------------------------------

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

//
//  Media queries collector
//  ---------------------------------------------

@import 'source/lib/_responsive.less';

@media-target: 'desktop'; // Sets target device for this file
@media-common: false; // Sets not to output common styles

//
//  Global variables override
//  ---------------------------------------------

@import 'source/_theme.less';

//
//  Extend for minor customisation
//  ---------------------------------------------

//@magento_import 'source/_extend.less';

답변:


20

대답은 Magento 문서에 다소 숨겨져 있습니다.

_extend.less를 사용하여 테마를 확장하는 것은 부모 테마의 모든 것에 만족하지만 더 많은 스타일을 추가하려는 경우 가장 간단한 옵션입니다.

자세한 내용은 여기를 참조하십시오

사용 _module.less는 당신은 모듈과 사용 스타일에 큰 변화하게 할 때 _extend.less 약간의 조정을위한입니다. 위의 링크에서 구성 요소 스타일을 재정의하는 방법에 대한 더 많은 예를 찾을 수 있습니다.


1
나는 그것을 읽었지만 실제로 이유를 설명하지는 않습니다. 추론이없는 것처럼 들립니다. 차이가 있는지 알아 내려고 노력 중입니다. 나는 'Magento가 그렇게 말했기 때문에 무언가를 사용하는 것보다 일관성을 선호하기 때문에 모든 변경 사항에 대해 _extend.less를 사용하고 있습니다.
벤 크룩

1
@BenCrook 지난 며칠 동안 읽은 내용이 제대로 제공된다면, 아닙니다. 누군가 .less상위 테마 / 모듈의 파일과 동일한 경로를 사용하여 테마에 파일 을 추가하려는 경우 이는 대체입니다. 테마에 빈 _module.less를 작성하고 원래 스타일이 적용되는지 확인하여 확인할 수 있습니다.
Darren Felton

1
php bin/magento setup:static-content:deploy, 당신은으로 볼 수 pub/static/frontend/<vendor>/<themeName>/<locale>/css/pub/static/frontend/<vendor>/<themeName>/<locale>/<Module_Name>/css/및 테마, 또는 그것에서 오는 모듈 / 부모 테마 중 하나에 * .less 파일에 대한 기호 링크가있을 것입니다.
Darren Felton

1
맞습니다. _module.less는 부모 덜 파일을 무시하고 상속 또는 병합이 없습니다. 나는 원래의 대답에서 그것을 더 명확하게 만들 수 있음을 알고 있습니다 :)
c.norin

1
@MattCosentino이 회신이 매우 늦다는 것을 알고 있지만 누군가 넘어 질 경우를 대비하여 여기에 남겨 두겠습니다. _extends.less와 _extend.less의 차이점에 유의하십시오. _extend.less 파일은 모 든 테마에서 스타일을 확장하기 위해 모든 모듈 컨텍스트에 추가 할 수 있습니다. _extends.less는 테마의 루트에 있으며 기존 유틸리티를 확장하는 데 사용됩니다 (<project> /lib/web/css/docs/source/_utilities.less 참조).
c.norin

3

두 가지의 간단한 설명 또는 차이점 :

_extend.less예를 들어 당신이 당신의 부모 테마 나왔습니다 행복을 위해 부모 테마의 스타일을 수정 / 확장 할 수있는 방법입니다 루마 그냥 사용자 지정 테마의 버튼 스타일을 변경하려면, 당신이해야 할 모든 새 파일을 만드는 것입니다 _buttons_extend.less아래에 web/css/source사용자 지정 테마와 거기에 스타일을 조정합니다. 이 파일을 _extend.less테마 디렉토리 내의 파일에 추가하여 등록하십시오 .

체크 아웃 모듈과 같은 모듈의 스타일을 확장하려는 경우 _extend.less테마 모듈 폴더 내에 파일을 만들고 Magento_Checkout/web/css/source/_extend.less모듈 스타일을 추가 / 확장 할 수 있습니다.

이제 _module.less모듈 디렉토리 안에 파일을 추가하면 Magento_Checkout/web/css/source/_module.less이 모듈의 부모 테마 스타일을 재정의하려고합니다.이 경우 _module.less부모 테마의 모듈 디렉토리에서 ' '파일 을 복사 하고 해당 파일을 수정해야합니다.이 파일은 부모 테마 _module.less파일을 모두 바꿉니다.


그는 루마에 대해 부모로서 이야기 한 적이 없습니다.
에스겔 알바

1

_extends.less공백 테마 내에서 마지막에 S로, 그들은을 통해 확장 할 수있는 모든 클래스 생성 된 파일입니다 LESS스타일의 변화에 대한 새로운 부품 또는 모듈 식 구조를 만들 필요없이 테마 내에서 나중에. -> 나를 믿지 않는 사람들을 위해 : https://github.com/magento/magento2/blob/2.3-develop/app/design/frontend/Magento/blank/web/css/source/_extends.less 확인 파일.

_extend.less말에 S 않고, 상위 테마가 있고 그냥 몇 가지를 변경 몇 가지 스타일을 변경해야 할 것과 99 % 행복 할 때입니다 그게 다야.

후자에 대한 나의 개인적인 견해는 당신 자신의 발전에 사용하지 마십시오. 나중에 큰 혼란을 만듭니다. _module.less사용자 정의하려는 모든 모듈에 대해 모듈 식 구조를 유지하면 결국 더 나은 결과와 유지 관리 가능한 프로젝트를 얻을 수 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.