Problemas con menos variables en _theme.less

Question

Utilizo las siguientes consultas de medios en mi _theme.less personalizado como

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

pero cuando ejecuto este comando bin/magento setup:static-content:deploy me sale variable @media-common is undefined in file ¿Qué pasa en este caso?El uso de grunt compila sin errores.

Answer 1

@fefe el @media-common La variable se establece inicialmente en:

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

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

Esto es si estás usando el tema en blanco o luma como padre.Si es así, entonces esto se aplica a usted.De lo contrario, cualquiera que sea su tema principal, debe tener una declaración e inicialización de esta variable... o si el tema principal que está utilizando llama a otro para su tema principal, se aplica lo mismo.

Échale un vistazo al styles-m.less y styles-l.less archivos para ver el orden en el que se importan menos archivos.También puede agregar alguna forma de inicio de sesión en \Less_Parser::parseFile().

La forma en que he solucionado esto es utilizar una importación con menos referencia. Menos documentos:opción de importación de referencia, que lo hará no ingrese el código dentro de dicho archivo Menos, simplemente hará que los archivos estén disponibles dentro del alcance del archivo que solicita la importación.

Un ejemplo de lo que importé en la parte superior de un archivo Less personalizado:

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

*Tenga en cuenta la ruta que estoy usando aquí en relación con la ruta del archivo Less personalizado de mi tema personalizado en relación con el eventual var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/ camino.

Mi jerarquía de directorios de temas personalizados se ve así: app/design/frontend/<Vendor>/<theme>/web/css/custom/custom.less.

Los archivos que quiero importar están aquí:

• 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

Mi archivo personalizado, que realizará la importación, eventualmente residirá aquí:

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

Ahora, dicho todo esto, aquí está el truco: realmente no es necesario que hagas esto.¿Por qué?Bueno, ¿no son los estilos CSS dentro del Guardias CSS, en este caso @media-common = true sólo destinado a ser llamado con el styles-m.less ¿archivo?Sí, porque se supone que M2 es primero móvil y por lo tanto el styles-m.less El archivo es el único archivo (guarde algunos archivos de correo electrónico Menos y creo que algunos otros) que realmente tiene @media-common ajustado a true (y sólo hay un puñado de archivos que incluso establecen esta variable, punto).

Entonces, cualquier cosa que esté dentro de un CSS Guard que tenga la condición de @media-common = true está destinado a ejecutarse siempre, excepto cuando el styles-l.less se llama el archivo. styles-l.less conjuntos @media-common a false como el styles-m.less El archivo ya debería haber cargado estos estilos 'comunes'... y si miras en vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml verás eso styles-m.css (que se genera a partir de styles-m.less si aún no está generado Documentos de desarrollo:Solicitud .css para búsqueda .less - Más Aquí) se carga antes styles-l.css.

Esto significa que literalmente podrías evitar ese error definiendo @media-common: true; en la parte superior de su archivo Less personalizado y según lo que describí anteriormente y lo que entiendo del código hasta ahora, eso debería solucionar el error.

Aquí está el problema: Ya sea que incluyas el source/lib/_responsive.less & source/lib/variables/_responsive.less archivos o definir los tuyos propios @media-common: true; en la parte superior de su archivo personalizado, esto sobrescribirá el @media-common: false; asignación en styles-l.less, por lo que obtendrás duplicación de código en ambos styles-m.less y styles-l.less.No veo ninguna manera de evitarlo en este momento.La raíz del problema es que nuestros archivos Less personalizados no se cargan después ambos styles-m.less y styles-l.less o que el @media-common El valor de la variable no se incluye en el alcance de nuestros archivos Less personalizados.Este no debería ser el caso, si importamos nuestro less personalizado a través del _extend.less archivo, que los documentos (sugieren), ya que tiene lo siguiente al final de ambos styles-m.less y styles-l.less:

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

Espero que esto le haya dado una idea y una solución inmediata a su problema.

Si usted o alguien más encuentra una solución mejor, soy todo oídos.

ACTUALIZAR Así que ignore lo que mencioné anteriormente con respecto a la duplicación de código.En mi caso, estaba agregando una inclusión explícita de mi CSS personalizado en una página. y También agregué mi archivo less personalizado a mi tema. _extend.less.

yo estaba modificando app/design/frontend/<Vendor>/<theme>/Magento_Cms/layout/cms_index_index.xml incluir lo siguiente:

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

y también tuve una entrada en app/design/frontend/<Vendor>/<theme>/web/css/source/_extend.less de:

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

Lo que he descubierto es que es una cosa o no ambas.Entonces, en este caso, cuando M2 intentaba procesar una solicitud de http://vappey.dev/static/frontend/<Vendor>/<theme>/<locale>/css/pages/homepage.css cargaría el apropiado homepage.less archivo y este archivo no tendría @media-common dentro de su alcance, por lo que el error fue revelador.Para solucionar esto, agregue referencias de importación como mencioné anteriormente y no habrá ninguna duplicación de código.Además, pero eliminando la entrada de _extend.less mi styles-m.less y styles-l.less no buscará el homepage.less archivo y no hay duplicación de código.

• Mi ejemplo aquí es para estilos específicos de la página de inicio... pero esto ilustra una situación en la que no estaba usando el sistema correctamente y es por eso que recibí ese error.espero que esto ayude