_theme.less에 변수가 적을 때 발생하는 문제

magento.stackexchange https://magento.stackexchange.com/questions/112855

문제

내 맞춤 _theme.less에서 아래 미디어 쿼리를 사용합니다.

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

하지만 이 명령을 실행하면 bin/magento setup:static-content:deploy 나는 변수를 얻는다 @media-common is undefined in file 이 경우 무슨 문제가 있나요?grunt를 사용하면 오류 없이 컴파일됩니다.

도움이 되었습니까?

해결책

@fefe 더 @media-common 변수는 처음에 다음 중 하나로 설정됩니다.

  • vendor/magento/theme-frontend-blank/web/css/styles-m.less

  • vendor/magento/theme-frontend-blank/web/css/styles-l.less

이것은 만약에 공백 또는 루마 테마를 상위 테마로 사용하고 있습니다.그렇다면 이것이 귀하에게 적용됩니다.그렇지 않은 경우 부모 테마가 무엇이든 이 변수의 선언 및 초기화가 있어야 합니다. 또는 사용 중인 부모 테마가 해당 부모에 대해 다른 테마를 호출하는 경우에도 동일하게 적용됩니다.

다음을 살펴보세요. styles-m.less 그리고 styles-l.less 파일을 적게 가져오는 순서를 확인합니다.다음 위치에서 특정 형태의 로깅을 추가할 수도 있습니다. \Less_Parser::parseFile().

내가 이 문제를 해결한 방법은 Less 참조 가져오기를 사용하는 것입니다. 문서 간략히:참조 가져오기 옵션, 이는 ~ 아니다 해당 Less 파일 내에서 코드를 가져오면 가져오기를 요청하는 파일 범위 내에서 파일을 사용할 수 있게 됩니다.

사용자 정의 Less 파일의 상단에 가져온 항목의 예:

@import (reference) "../source/lib/variables/_responsive.less"; @import (reference) "../source/lib/_responsive.less";

*최종 테마와 관련하여 내 사용자 정의 테마의 사용자 정의 Less 파일 경로를 기준으로 여기에서 사용하는 경로를 기록해 두십시오. var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/ 길.

내 사용자 정의 테마 디렉터리 계층 구조는 다음과 같습니다. app/design/frontend/<Vendor>/<theme>/web/css/custom/custom.less.

가져오려는 파일은 여기에 있습니다.

  • var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/source/lib/_responsive.less

  • var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/source/lib/variables/_responsive.less

가져오기를 수행할 내 사용자 정의 파일은 결국 다음 위치에 저장됩니다.

  • var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/custom/custom.less

자, 여기에 키커가 있다고 말한 모든 것이 있으므로 실제로 이 작업을 수행할 필요는 없습니다.왜?글쎄, CSS 스타일이 아닌가? CSS 가드, 이 경우 @media-common = true 단지 styles-m.less 파일?예, 왜냐하면 M2는 모바일 우선이어야 하기 때문입니다. styles-m.less file은 실제로 다음과 같은 파일이 있는 유일한 파일입니다(일부 이메일 Less files를 저장하고 다른 파일도 몇 개 있다고 생각함). @media-common 로 설정 true (그리고 이 변수, 마침표를 설정하는 파일은 소수에 불과합니다).

따라서 다음 조건을 갖는 CSS Guard 내에 있는 모든 항목은 다음과 같습니다. @media-common = true 경우를 제외하고는 항상 실행되도록 되어 있습니다. styles-l.less 파일이 호출됩니다. styles-l.less 세트 @media-common 에게 false 으로 styles-m.less 파일에는 이러한 '공통' 스타일이 이미 로드되어 있어야 합니다. vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml 당신은 그것을 볼 것입니다 styles-m.css (다음에서 생성됩니다. styles-m.less 아직 생성되지 않은 경우 개발 문서:.less 검색에 대한 .css 요청 - 더 여기)는 이전에 로드됩니다. styles-l.css.

이는 문자 그대로 다음을 정의하여 해당 오류를 해결할 수 있음을 의미합니다. @media-common: true; 위에서 설명한 내용과 지금까지 코드에 대해 내가 이해한 내용을 바탕으로 사용자 정의 Less 파일 상단에 있는 오류를 처리해야 합니다.

문제는 다음과 같습니다. 다음을 포함하는지 여부 source/lib/_responsive.less & source/lib/variables/_responsive.less 파일 또는 자신만의 정의 @media-common: true; 사용자 정의 파일 상단에서 @media-common: false; 할당 styles-l.less, 따라서 둘 다에서 코드 중복이 발생하게 됩니다. styles-m.less 그리고 styles-l.less.현재로서는 그 문제를 해결할 방법이 없습니다.이것의 근본 문제는 사용자 정의 Less 파일이 로드되지 않는다는 것입니다. ~ 후에 둘 다 styles-m.less 그리고 styles-l.less 아니면 @media-common 변수의 값이 사용자 정의 Less 파일의 범위로 가져오지 않습니다.우리가 다음을 통해 사용자 정의 Less를 가져오는 경우에는 그렇지 않습니다. _extend.less 두 파일의 끝에 다음이 있으므로 문서에서 제안하는 파일입니다. styles-m.less 그리고 styles-l.less:

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

이것이 귀하에게 문제에 대한 통찰력과 즉각적인 해결책을 제공하였기를 바랍니다.

당신이나 다른 누군가가 더 나은 해결책을 생각해낸다면, 저는 귀를 기울일 것입니다.

업데이트 따라서 코드 복제에 관해 위에서 언급한 내용은 무시하세요.내 경우에는 내 사용자 정의 CSS를 페이지에 명시적으로 포함하도록 추가했습니다. 그리고 또한 내 테마에 내 사용자 정의 Less 파일을 추가했습니다. _extend.less.

나는 수정하고 있었다 app/design/frontend/<Vendor>/<theme>/Magento_Cms/layout/cms_index_index.xml 다음을 포함합니다:

<head> <!-- ADD PAGE-SPECIFIC STYLES SHEETS HERE --> <css src="css/pages/homepage.css" /> </head>

그리고 나는 또한 app/design/frontend/<Vendor>/<theme>/web/css/source/_extend.less 의:

@import "../pages/homepage.less";

내가 찾은 것은 둘 중 하나이거나 둘 다는 아니라는 것입니다.따라서 이 경우 M2가 다음 요청을 처리하려고 시도했을 때 http://vappey.dev/static/frontend/<Vendor>/<theme>/<locale>/css/pages/homepage.css 그것은 적절한 것을로드 할 것입니다 homepage.less 파일과 이 파일에는 없습니다. @media-common 그 범위 내에서 오류가 발생했습니다.이 문제를 해결하려면 위에서 언급한 대로 가져오기 참조를 추가하세요. 그러면 코드가 중복되지 않습니다.또한 항목을 제거하지만 _extend.less 나의 styles-m.less 그리고 styles-l.less 찾지 않을 것이다 homepage.less 파일이고 코드 중복이 없습니다.

  • 여기 내 예는 홈페이지별 스타일에 대한 것입니다. 하지만 이것은 시스템을 올바르게 사용하지 않은 상황을 보여주며 이것이 바로 오류가 발생한 이유입니다.이게 도움이 되길 바란다
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 magento.stackexchange
scroll top