Magento 2-어디서나! important를 사용하지 않고 CSS 재정의

10

현재 고객을 위해 Magento 2 사이트에서 작업하고 있습니다. 고객의 브랜드가 boofar있고 확장 / 재정의하려는 foobar테마가 다음을 사용하여 상위 테마로 설정되었다고 가정합니다.frontend/Foobarthemes/boofar/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Boofar</title>
<parent>Foobarthemes/foobar1</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>

그런 다음 frontend/Foobarthemes/boofar/web/css/source/_theme.less재정의하려는 CSS 코드를 작성했습니다. 나는 또한 이것을 시도했다 _extend.less.

.magicmenu {
  .home {
    display: none !important;
  }
  .nav-desktop .level0 .level-top > span {
    font-size: 12px;
    font-weight: normal;
    text-transformation: none;
  }
}

나는 !important여기서 일 하기 위해 무엇이든 사용해야 합니다. 위의 코드에서는 글꼴과 텍스트가 작동하지 않습니다.

Magento 2 프론트 엔드 워크 플로우를 올바르게 이해하지 못했습니까?

magento2  theme  css  frontend  less-css 
— 프랜시스 김
소스
원래 CSS 규칙은 어디에 있습니까?
— Aaron Allen
— Ankit Shah
1
web / css / custom.css (간단한 CSS)에서 이것을 업데이트하고 var / 폴더 및 pub / static / content / frontend / yourtheme_package / yourtheme / en_US / css 폴더를 제거하고 php bin / magento setup : static을 실행하는 것을 잊지 마십시오 -cotent : 배포 명령.
— Nits
"foobar"가 아닌 parent 테마에 theme.xml "foobar1"
— St3phan

답변:

8

_theme.less부모 테마의 _theme.less파일 을 재정의하려는 경우 파일에 스타일 만 포함하려고 합니다. 해당 파일의 경우 하나만로드되며 파일이 존재하는 경우 항상 선택된 테마가됩니다. 거기에서 폴백 구성표를 사용하여 해당 파일을 찾아 사용합니다.

따라서 귀하의 경우 _extend.less파일 사용 이 올바른 파일입니다.

_extend.less파일 에 삽입 된 코드가 Magento가 사이트에 존재하는 모든 스타일을 컴파일 할 때 마지막에로드 되기 때문에 다소 혼란 스럽다 . 그래서로드 순서를 어지럽히는 것이 있는지 궁금합니다.

설정 한 방식을 살펴보고 동일한 테마가 아닌 다른 네임 스페이스에서 테마를 설정하십시오. 테마를 설정하는 방식이 Magento에 루마 / 빈 테마를 설정 한 것과 동일하므로 문제를 해결할 수 없습니다. 그러나 내가 한 모든 작업에 대해 타사 테마 또는 luma / blank에서 확장되는 벤더 네임 스페이스가 있습니다.

다음으로 시도 할 것은 내장 미디어 쿼리에서 코드를 래핑하는 것입니다. 여기 에 더 자세히 설명되어 있지만 기본적으로 스타일이 styles-l.css및 styles-m.css파일에 두 번로드되는 것을 막습니다 .

//
//    Common
//--------------------------------------
& when (@media-common = true) {}

거기에서 그것은 모두 CSS 특이성에 달려 있습니다. 다른 것보다 더 높은 것이 있으면 스타일의 클래스 / ID 정의에 더 구체적이어야합니다. DOM 구조의 그림을 게시하여 대상으로하는 대상과 대상으로하는 대상을 넘어서는 대상을 표시 할 수 있습니다.

— 서클
소스
좋은 지적-어쩌면 내가 사용하고있는 테마 (제 3 자)가 이상한 일을하고 있지만 기본 테마에 대해 동일한 재정의를 수행한다고 말하면! important를 사용할 필요는 없습니다. 시도해 볼 가치가 있습니까?
— Francis Kim
1
registration.php, theme.xml및 웹 폴더 만으로 빠른 테마를 만들 수 있다고 생각 합니다. 다시 컴파일 한 다음 관리자에서이를 선택하고 어떻게되는지 확인하십시오. 다른 일이 일어나고 있다고 생각하지만 가능성이 있습니다.
— 동그라미 ixix
1
또한, 위생 검사와 마찬가지로 스타일에 고유 한 값을 입력하고 ( background-color: tomato아무도 그 색상을 사용하지 않기 때문에 사용 하고 싶지 않음) 시트에서 끝나는 컴파일 된 스타일을 확인할 수 있습니다. pub/static/frontend/{package}/{theme}/en_us/css두 스타일 파일을 찾으십시오 . 이것이 파일의 끝이 아닌 경우, 기본로드 순서에 문제가있는 것입니다.
— 동그라미 ixix
4

_extend.less 파일에 스타일을 적용 할 수 있으면 CSS 특이성에 문제가 있음을 의미합니다. Magento2는 컴파일을 덜 사용하므로 대부분의 스타일은 매우 구체적입니다. 이를 재정의하려면 스타일 선택기가보다 구체적이거나 동일해야합니다. 온라인에서 찾을 수있는 기사가 많으므로 여기에 개념 자체의 세부 사항을 게시하지 않습니다.

— 티 미크
소스
3

기본 LESS 설정을 사용하는 경우 모든 LESS가 M2 LESS 미디어 쿼리 내에 작성 되었는지 확인하십시오 . 그렇지 않으면 CSS가 중복되어 특이성 문제가 생길 수 있습니다.

이 모든 것은 특이성과로드 순서에 달려 있으며, CSS 는 부모 테마 (또는 모듈) 다음에로드 되어야 하므로이를 오버 라이드하려면 특정 성을 충족해야합니다.

예를 들어 부모 테마가

.parent-selector .selector {
    ...
}

그런 다음 동일한 선택기를 작성해야합니다. 어떤 이유로 작동하지 않으면 다른 선택기를 추가하기 전에 추가해야합니다. 쉬운 방법은 모든 선택기를 포함하고 특이성을 추가하기 때문에 본문을 추가하는 것입니다. 이렇게 :

body .parent-selector .selector {
    ...
}

이 기사 에는 CSS 특이성에 대한 좋은 정보가 들어 있습니다.

또는 전체 파일을 덮어 쓸 수 있습니다

많은 사용자 정의를 수행하는 경우 확장하는 대신 전체 파일을 덮어 쓰는 것이 좋습니다. 이렇게하려면 동일한 파일 경로와 이름을 사용하여 파일을 테마에 추가하십시오.

— 벤 크룩
소스
0

우선 순위를 높이기 위해 선택기를 복제 할 수 있습니다. 

  .home.home {
    display: none;
  }
— 빅터 슬
소스
좋은 팁! 그러나 불행히도 내가 추구하는 것은 아닙니다.
— Francis Kim
0

.less파일을 재정의하려는 경우와 같이 재정의하려는 상위 테마의 동일한 파일을 재정의해야 _theme.less합니다. 그런 다음이 파일을 여기의 하위 테마로 복사해야합니다 (부모 테마의 동일한 경로를 확인하십시오)

frontend/Foobarthemes/boofar/web/css/source/_theme.less

여기서 CSS를 무시할 수 있습니다.

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