Magento 2에서 빈 테마 스타일 재정의

Magento 2의 빈 테마에서 상속받을 때 사용자 정의 테마의 탐색 스타일을 재정의하는 방법은 무엇입니까?

나는이 theme.css내에서 파일 app/design/frontend/<Vendor>/<theme>/web/css폴더를,하지만 난 젠토 2 LESS를 사용하는 것을 알고 있습니다. 스타일 theme.css시트 내에서 스타일을 쉽게 재정의 할 수 있지만을 계속 사용하고 싶지는 않습니다 !important.

또한 Bootstrap 3을 사용하고 있으며 빈 테마의 스타일이 Bootstrap에서 일치하는 모든 스타일 명령을 재정의한다고 가정합니다. 이것에 접근하는 가장 좋은 방법은 무엇입니까?

— 가레스 데인
소스

답변:

부모 테마에서 스타일을 재정의하거나 확장하기 위해 Magento에서 권장하는 두 가지 방법 :

1. 간단한 방법

넓히다:

테마 디렉토리에서 web/css/source서브 디렉토리를 작성하십시오 . (이 부분은 이미 완료 _extend.less했습니다.) 거기서 파일을 만듭니다 .

설명서 에 따르면 :

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

우세하다:

_extend.less파일 을 작성하는 대신 파일을 작성 _theme.less합니다. 이 경우 _theme.less변경되지 않는 변수를 포함 하여 부모로부터 필요한 모든 변수를 복사해야합니다 . 그런 다음 변경하십시오.

설명서 에 따르면 단점은 다음과 같습니다.

"부모의 _theme.less가 업데이트 될 때마다 파일을 모니터링하고 수동으로 업데이트해야합니다."

2. 구조화 된 방법

넓히다:

이 방법을 사용하면 코드를 더 나은 방식으로 구성 할 수 있습니다. 변경 사항이 구조화됩니다. 단일 _extend.less 파일을 사용하여 모든 변경 사항을 포함 시키는 대신 변경하려는 Magento UI 라이브러리에서 각 구성 요소에 대한 확장 파일을 만듭니다.

버튼 및 탐색 구성 요소에서 스타일을 확장한다고 가정하십시오. 테마 디렉토리에이 개 파일을 만듭니다 _buttons_extend.less및 _navigation_extend.less다음 해당 파일의 각 구성 요소에 대한 변경 사항을 추가 할 수 있습니다.

그런 다음 _extend.less이 코드를 추가 하여 파일 을 작성하십시오 .

@import '_buttons_extend.less'; 
@import '_navigation_extend.less';

우세하다:

테마에서 변경 (하려는 UI 구성 요소에 해당하는 파일의 복사본을 생성 _buttons.less, _navigation.less등)이 파일은 우선합니다 _buttons.less부모 테마를.

override 와 extend 의 차이점을 알아 두는 것이 중요합니다 .

이 문서 에서 재정의 및 확장 또는 Frontend Developer 's Guide의 Magento 2에서 CSS에 대한 자세한 내용을 읽을 수 있습니다 .

— 루이스 가르시아
소스

Vendor_Namespace 폴더가 있다고 말하고 "web / css / source / _extend.less"라는 다른 폴더를 추가하면 web / css / source /의 _extend.less-File이 해당 파일의 위치를 알 수 있습니까? 내가 정확히 이해하고

— Max

예, 파일을 만들고 web/css/source/_extend.less스타일을 넣습니다.

— 루이스 가르시아

_extend.less 파일을 생성하여 _slider.less를 가져옵니다. <theme_folder> / css / source / 두 파일이 동일한 경로에 있지만 작동하지 않습니다. _slider.less의 모든 규칙은 .css 생성 파일에서 찾을 수 없습니다. 개발자 모드에 있고 "php magento setup : static-content : deploy"

— xzegga

브라우저 캐시를 삭제 했습니까?

— Luis Garcia

<theme_folder> / css / source / lib / variables를 무시할 수 있습니까? 더 적은 파일의 변수를 변경하는 방법은 무엇입니까? (예를 들어 @ button-background를 재정의하고 싶다고 말하십시오)-_buttons_extend.less 내에 작성해야하거나 모든 lin / web / css / source를 재정의 할 수 있습니다 / lib / variables

— Goldy

Foundation을 사용하여 비슷한 문제가 발생했습니다. 이를 수행하는 공식적인 방법은 특정 모듈의 적은 파일을 무시하고 CSS를 수정하는 것입니다. 그런 다음 컴파일하는 동안 Magento가 가져옵니다.

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/debug-theme.html#debug-theme-style

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html

결국 Magento가 만든 모든 기본 CSS 파일을 제거했습니다. 다양한 모듈을 모두 재정의하는 것보다 특히 부트 스트랩과 같은 프레임 워크를 사용하여 사용자 정의 CSS를 작성하는 것이 훨씬 쉽다는 것을 알았습니다. 당신은 이것을 할 수 있습니다 :

app/design/frontend/{vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <remove src="css/styles-m.css" />
    <remove src="css/styles-l.css" />
    <remove src="css/print.css" />
    <remove src="css/styles.css" />
</head>
</xml>

— 마이크 스텀프
소스

물건을 커밋하는 좋은 방법. 그러나 문제는 전체 주제를 "확장"하고 더 많은 주제를 추가하는 것입니다.

— Miguel Felipe Guillen Calo

아니요, 문제는 재정의에 관한 것입니다.

— 블랙

styles-m.css 를 재정의 한 다음 web/css테마 의 사본을 넣고 custom-styles-m.css로 이름을 지정한다고 가정하겠습니다 .

그런 다음 테마 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>
        <remove src="css/styles-m.css" />
        <css src="css/custom-styles-m.css" />
        ...

— 검은
소스