Magento 2 - Anular CSS sin usar! Importante en todas partes

10

Estoy trabajando en un sitio de Magento 2 en este momento para un cliente. Supongamos que la marca de mi cliente es boofary el tema que estoy tratando de extender / anular es foobarque he establecido como tema principal usandofrontend/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>

Luego, debajo frontend/Foobarthemes/boofar/web/css/source/_theme.less, he escrito el código CSS que quiero anular. También he intentado esto con _extend.less.

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

Me veo obligado a usar !importantcualquier cosa para trabajar aquí. Ninguna de las fuentes y texto funciona en el código anterior.

¿No he entendido correctamente el flujo de trabajo de la interfaz de Magento 2?

Francis Kim
fuente
¿Dónde se encuentra la regla css original?
Aaron Allen
1
Intente actualizar esto en web / css / custom.css (css simple) y no olvide eliminar var / folder y pub / static / content / frontend / yourtheme_package / yourtheme / en_US / remove css folder y ejecute php bin / magento setup: static -cotente: comando de despliegue.
Nits
Tienes en theme.xml "foobar1" al tema principal no "foobar"
St3phan

Respuestas:

8

Solo desea tener sus estilos en el _theme.lessarchivo si desea anular el _theme.lessarchivo del tema principal . Para ese archivo, solo se carga uno de ellos, y siempre será el tema seleccionado si el archivo existe allí. A partir de ahí, usará el esquema de reserva para encontrar ese archivo y usarlo.

Entonces, en su caso, usar el _extend.lessarchivo es el archivo correcto para usar.

Sin embargo, esto es un poco confuso, ya que el código que se coloca en el _extend.lessarchivo se carga en último lugar cuando Magento compila todos los estilos que existen en el sitio. Así que me pregunto si hay algún problema con el orden de carga.

Revisando la forma en que lo configuró, intente configurar su tema en un espacio de nombres diferente y no en el mismo tema. Esto podría no resolver el problema, ya que la forma en que configura su tema es la misma que Magento tiene configurado el tema luma / blank. Pero por todo el trabajo que he hecho, tengo mi espacio de nombres de vendedor que luego se extenderá desde un tema de terceros o desde luma / blank.

Lo siguiente que debe intentar sería envolver su código en las consultas multimedia integradas. Entro aquí con más detalle , pero básicamente evita que sus estilos se carguen dos veces en styles-l.csslos styles-m.cssarchivos.

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

A partir de ahí, todo se reduce a la especificidad CSS. Si hay algo más que es más alto que el tuyo, debes ser más específico en tu definición de clase / id en los estilos. Es posible que desee publicar una imagen de la estructura DOM para mostrar lo que está apuntando y lo que está por encima de lo que está buscando apuntar.

Círculosix
fuente
Buen punto: tal vez el tema que estoy usando (tercero) está haciendo algo extraño, pero por lo que dices si hago la misma anulación para el tema predeterminado, ¡no debería tener que usarlo! importante. ¿Vale la pena intentarlo?
Francis Kim
1
Creo que sí, puedes crear un tema rápido con solo el registration.php, theme.xmly la carpeta web. Vuelva a compilar y luego selecciónelo en el administrador y vea qué sucede. Estoy pensando que algo más está sucediendo, pero esto se me ocurrió como una posibilidad.
circlesix
1
Además, al igual que un control de cordura, puede poner un valor que sea único en sus estilos (me gusta usarlo background-color: tomatoya que nadie usaría ese color) y verificar para ver en los estilos compilados en qué parte de la hoja está terminando. busca pub/static/frontend/{package}/{theme}/en_us/csslos archivos de ambos estilos. Si esto no está al final del archivo, algo está fallando con el orden de carga predeterminado.
circlesix
4

Si puede aplicar sus estilos en el archivo _extend.less, esto significa que tiene problemas con la especificidad de CSS. Como Magento2 usa menos compilación, la mayoría de los estilos son muy específicos. Para anularlos, los selectores de estilos deben ser más o igualmente específicos. No publicaré detalles del concepto en sí mismo ya que se pueden encontrar muchos artículos en línea.

Timik
fuente
3

Si está utilizando la configuración MENOS predeterminada, asegúrese de que TODOS sus MENOS estén escritos dentro de las consultas multimedia M2 MENOS. Si no lo hace, terminará con CSS duplicado y probablemente problemas de especificidad.


Todo esto se reduce a la especificidad y al orden de carga, su CSS debe cargarse después de los temas principales (o módulos), por lo que para anular esto, todo lo que necesita hacer es cumplir con su especificidad.

Por ejemplo, si el tema principal usa

.parent-selector .selector {
    ...
}

Entonces necesitaría escribir el mismo selector, si por alguna razón eso no funciona, solo necesita agregar otro selector antes. Una manera fácil es agregar un cuerpo antes, ya que cubre cada selector y agrega especificidad. Al igual que:

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

Este artículo contiene buena información sobre la especificidad de CSS.

Alternativamente, puede sobrescribir todo el archivo

Si está haciendo muchas personalizaciones, es mejor sobrescribir todo el archivo en lugar de extenderlo. Para hacer esto, simplemente agregue el archivo a su tema usando la misma ruta y nombre de archivo.

Ben Crook
fuente
0

Para mayor prioridad puede duplicar el selector:

  .home.home {
    display: none;
  }
Victor Sl
fuente
¡Buen consejo! Pero desafortunadamente no es lo que busco.
Francis Kim
0

Debe anular el mismo .lessarchivo del tema principal que desea anular, como si desea anular el _theme.lessarchivo, entonces debe copiar este archivo al tema secundario aquí (asegúrese de la misma ruta del tema principal)

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

Puedes anular tu CSS aquí.

Dipesh Rangani
fuente