에서 젠토 2 DevDoc 는 말한다
CSS 파일을 포함 시키려면 레이아웃 파일의 <head> 섹션에 <css src = "<path> / <file>"media = "print | <option>"/> 블록을 추가하십시오.
그러나 CSS 파일의 순서에 어떻게 영향을 줄 수 있는지 말하지 않습니다. 그리고 부모 테마를 가진 커스텀 테마에 CSS 파일을 이런 식으로 추가하면 그 결과 파일이 <head> 섹션의 맨 위에 추가되고 그 아래에 많은 다른 CSS 파일이 추가됩니다. 낮으며 상위 테마 또는 확장의 규칙을 쉽게 무시할 수 없습니다.
마 젠토 1에서도 비슷한 문제가 있었고 해결 방법이있었습니다. 어떤 사람들은 더 깨끗한 사람들이 더 적었습니다.
Magento 2에서 <head> 하단에 사용자 정의 테마의 CSS 파일을 주문하는 가장 좋은 방법은 무엇입니까? 가능하면 사용자 정의 테마에 대한 Magento 2 레이아웃 지침을 준수합니까?
답변:
Magento2에는이를위한 기본 제공 메커니즘이 없으므로 첫 Magento2 확장을 작성할 기회로 간주하기로 결정했습니다. Quickshiftin \ Assetorderer 확장 GitHub의에서 사용할 수 있습니다!
확장이 설치되면 CSS XML 태그 에서 주문 속성을 지정할 수 있습니다 .
<head>
<css src="css/page/home.css" order="100"/>
</head>와 같은 레이아웃 XML 파일에서 order 속성을 사용할 수도 있습니다 default_head_blocks.xml. 주문 을 지정하지 않은 모든 CSS 태그 는 주문 이 1 인 것처럼 취급됩니다 .
order="1"파일을 추가 하면 파일이 올바르게 정렬 되므로 v2.1.1에서 더 이상 필요하지 않을 가능성이 있습니다 . 추가 속성을 추가하는 한 속성이 무엇인지는 중요하지 않습니다. 유효성을 검사하기 위해로 변경해도 data-order="1"여전히 작동합니다.
mediacss 요소에 속성을 추가 할 수 있습니다 . 그러면 헤드에 포함 된 모든 CSS 끝에 추가됩니다.
<head>
<css src="css/styles.css" media="all" />
</head>나는 여기에서 magento가 CSS를 렌더링하는 방법과 순서가 장면 뒤에서 어떻게 일어나는지에 대해 자세히 대답했습니다 .
여기에 언급해야 할 몇 가지 추가 사항은 다음과 같습니다.
style-m.css및 stlyle-l.css다음에 사용자 정의 CSS 파일을 렌더링 하려면 다음과 같이 CSS 파일을 정의해야합니다.
<css src="Magento_Theme:css/path/file.css" media="all" />당신은 전에 사용자 정의 CSS 파일을로드 할 경우 style-m.css와 stlyle-l.css, 당신은 레이아웃 XML 파일을 통해 CSS 파일을 포함해야 default_head_blocks.xml하고 위의 사용자 정의 CSS 파일을 추가 style-m.css하고 stlyle-l.css.
CSS 속성은 유한하며 레이아웃 스키마에 잘 정의되어 있습니다. 레이아웃 스키마에 따라 CSS 파일에서 다음 속성을 사용할 수 있습니다.
파일: vendor/magento/framework/View/Layout/etc/head.xsd
<xs:complexType name="linkType">
<xs:attribute name="src" type="xs:string" use="required"/>
<xs:attribute name="defer" type="xs:string"/>
<xs:attribute name="ie_condition" type="xs:string"/>
<xs:attribute name="charset" type="xs:string"/>
<xs:attribute name="hreflang" type="xs:string"/>
<xs:attribute name="media" type="xs:string"/>
<xs:attribute name="rel" type="xs:string"/>
<xs:attribute name="rev" type="xs:string"/>
<xs:attribute name="sizes" type="xs:string"/>
<xs:attribute name="target" type="xs:string"/>
<xs:attribute name="type" type="xs:string"/>
<xs:attribute name="src_type" type="xs:string"/>
</xs:complexType>이것은 단순히 order레이아웃 XML 파일에서 CSS 정의와 함께 또는 다른 속성을 사용할 수 없음을 의미 합니다. 이렇게하면 스키마 유효성 검사가 실패했음을 나타내는 예외가 발생합니다.
부모 선택기를 추가하거나 제거하여 CSS 규칙을 핵심 CSS 규칙보다 더 중요하게 만들 수 있습니다.
예를 들어 코어에서 샘플 CSS 규칙을 보자.
.cart.table-wrapper .item .col.item {
padding: 20px 8px 20px 0;
}다음과 같이 부모 선택기를 추가하여 사용자 지정 규칙을 더 중요하게 만들 수 있습니다.
body .cart.table-wrapper .item .col.item {
padding: 10px 8px 20px 0;
}또는
body .cart.table-wrapper .item td.col.item {
padding: 10px 8px 20px 0;
}다음과 같이 부모 선택기를 제거하여 사용자 지정 규칙을 덜 중요하게 만들 수 있습니다.
.item td.col.item {
padding: 30px 8px 20px 0;
}!important(물론 당신의 접근 방식이 여전히 그것보다 낫다) LESS로 벤더 접두사 클래스를 구현할 수있다. 여전히 불필요한 오버 헤드와 복잡성이 추가됩니다. CSS의 간단한 순서 변경으로 인해 수백 가지 이상의 규칙을 접두사로 사용하는 이유는 무엇입니까? 그래서 나는 여전히 마 젠토 쪽에서 이것을 해결할 수있는 좋은 방법을 찾고 있습니다.