_minicart.less와 같이 web / css / source / module에서 모듈을 덜 확장하는 가장 좋은 방법은 무엇입니까?


14

<module>/web/css/source/module/예를 들어, 파일 내용을 적게 확장하는 가장 좋은 방법은 Magento_Checkout/web/css/source/module/_minicart.less무엇입니까?

그것을 가정

A) 오버라이드

  1. 테마 관련 덜 만들고 (또는 복사) 덜 부모 테마의 같은 이름이 같은 테마에 넣어합니다 theme-frontend-blank/web/css/source/_buttons.less-><your-theme>/web/css/source/_buttons.less
  2. 모듈 특정 덜 만들고 (또는 복사) 덜 부모 테마의 같은 이름이 같은 테마에 넣어합니다 theme-frontend-blank/Magento_Theme/web/css/source/_module.less-><your-theme>Magento_Theme/web/css/source/_module.less
  3. UI lib에 덜 만들고 (또는 복사) 덜 라이브러리 폴더에 같은 이름을 내용으로이 같은 테마에 넣어합니다 magento2-base/lib/web/css/source/lib/_buttons.less-><your-theme>Magento_Theme/web/css/source/lib/_buttons.less

그리고

B) 연장

  1. 테마와 관련이 적습니다. 테마 에 _extend.less 파일을 작성하여 이와 같은 이름으로 _extend 를 추가하여 web / css / source에있는 테마 컨텐츠의 _extend.less에서 @import 지시문으로 해당 파일 <your-theme>/web/css/source/_navigation_extend.less을 확장하고 theme-frontend-blank/web/css/source/_navigation.less등록하십시오.@import "_navigation_extend.less"
  2. 모듈 특정 덜 이 같은 테마 모듈 경로에 _extend.less 파일을 작성해야합니다 <your-theme>Magento_CatalogSearch/web/css/source/_extend.lessMagento_CatalogSearch 원래 _module.less를 확장
  3. UI 라이브러리가 적을 때 라이브러리 폴더에 같은 이름의 내용을 사용하여 덜 생성해야합니다. 이와 같이 이름에 _extend 를 추가하면 web / css / source의 테마 내용이없는 _extend.less의 @import 지시문으로 해당 파일 <your-theme>Magento_Theme/web/css/source/lib/_buttons_extend.less을 확장하고 magento2-base/lib/web/css/source/lib/_buttons.less등록 할 수 있습니다. >@import "lib/_buttons_extend.less"

이론은 _minicart_extend.less를 만들 것을 제안해야하지만 자동으로 작동하지는 않습니다. B1 또는 B3에서 설명한 것처럼 해당 모듈의 _extend.less에서 해당 파일을 가져와야합니까?

그리고 확장하는 구성 요소가 확장의 올바른 방법이지만 _extend.less에서 가져와야하는 경우 왜 덜 확장되는 이러한 구성 요소가 CSS 구문 분석에 자동으로 포함되지 않습니까?

(또 다른 질문이 있습니다 : web/css/source/lib/_buttons.lessweb/css/source/_buttons.less? 의 차이점은 무엇 입니까?)

조금 혼란 스러워요. 누군가 나를 도울 수 있기를 바랍니다.

이 긴 글에 대해 죄송합니다.


출처 :

답변:


12

Magento 2 규칙에 따라 모듈 스타일을 확장하는 가장 좋은 방법은 다음과 같습니다.

스타일을 확장 Magento_Checkout/web/css/source/module/_minicart.less하려면 2 개의 파일이 있어야합니다.

  • <your-theme>/Magento_Checkout/web/css/source/_extend.less맞춤 확장을 가져올 위치입니다. 이 경우@import "_minicart_extend.less"

  • <your-theme>/Magento_Checkout/web/css/source/_minicart_extend.less 사용자 정의 스타일이 포함됩니다.

_extend.less파일을 지정하기 위해 파일이 필요한 이유는 @importsMagento가 _extend.less모듈 당 자동으로 만 포함하기 때문 입니다. 모든 것을 *_extend.less자동으로 확인하고 추가하는 것은 시간이 걸리므로 그렇게 구현되지 않은 이유입니다.

미니 카트를 담당하는 Magento Blank 테마 파일은 다음 위치에 있습니다. /vendor/magento/theme-frontend-blank/Magento_Checkout/

모든 사용자 정의 스타일을에 직접 추가 할 수도 있습니다 _extend.less. 그러나 원래 모듈과 같이 작고 특정 파일로 분할하면 코드가 명확하고 체계적으로 유지됩니다. Magento 2 표준에 따라 권장되는 방법이기도합니다.


@Jalogut 감사합니다! 따라서 "_minicart_extend.less"를 "foobar.less"라고도 할 수 있으며 _extend.less의 @import가 중요하기 때문에 아무런 차이가 없습니다. 컴포넌트 이름에 "_extendd.less"를 추가하면 모든 것을보다 명확하게 유지하는 데 도움이되는 규칙 일 뿐입니 까?
Loreena

바로 그 아이디어입니다.
Jalogut

@Jalogut "* _extend.less를 자동으로 확인하고 추가하면 시간이 많이 걸릴 것입니다"라고 말하는 것이 확실합니까? 왜냐하면 IMO는 개발자들이 커스터마이징을 원할 때마다 (처음에는 약간의 혼란이 생길 ​​때마다) 더 많은 것을 요구하지만 그렇게 많이는 아니기 때문입니다.
medmek
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.