Magento 2 - Remplacer CSS sans utiliser! Important partout

Je travaille actuellement sur un site Magento 2 pour un client. Supposons que la marque de mon client soit boofaret que le thème que j'essaie d'étendre / remplacer soit celui foobarque j'ai défini comme thème parent à l'aidefrontend/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>

Ensuite, sous frontend/Foobarthemes/boofar/web/css/source/_theme.lessj'ai écrit le code CSS que je veux remplacer. J'ai également essayé cela avec _extend.less.

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

Je suis obligé d'utiliser !importantquoi que ce soit pour travailler ici. Aucun des éléments de police et de texte ne fonctionne dans le code ci-dessus.

N'ai-je pas bien compris le workflow frontend de Magento 2?

Vous ne souhaitez avoir vos styles dans le _theme.lessfichier que si vous souhaitez remplacer le _theme.lessfichier du thème parent . Pour ce fichier, un seul d'entre eux est chargé et ce sera toujours le thème sélectionné si le fichier existe. À partir de là, il utilisera le schéma de secours pour trouver ce fichier et l'utiliser.

Donc, dans votre cas, l'utilisation du _extend.lessfichier est le bon fichier à utiliser.

C'est un peu déroutant cependant, car le code qui est placé dans le _extend.lessfichier est chargé en dernier lorsque Magento compile tous les styles qui existent sur le site. Je me demande donc s'il y a un problème avec l'ordre de chargement.

En examinant la façon dont vous l'avez configuré, essayez de configurer votre thème dans un espace de noms différent et non dans le même thème. Cela pourrait ne pas résoudre le problème, car la façon dont vous avez configuré votre thème est la même que Magento a configuré le thème luma / vide. Mais pour tout le travail que j'ai fait, j'ai mon espace de noms de vendeur qui s'étendra ensuite à partir d'un thème tiers ou de luma / blank.

La prochaine chose à essayer serait d'encapsuler votre code dans les requêtes multimédias intégrées. J'entre plus en détail ici , mais en gros, cela empêche vos styles d'être chargés deux fois dans styles-l.cssles styles-m.cssfichiers et.

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

À partir de là, tout se résume à la spécificité CSS. S'il y a autre chose qui est plus élevé que le vôtre, vous devez être plus précis dans votre définition de classe / id dans les styles. Vous voudrez peut-être publier une image de la structure DOM pour montrer ce que vous ciblez et ce qui dépasse ce que vous cherchez à cibler.

Si vous pouvez appliquer vos styles dans le fichier _extend.less, cela signifie que vous avez des problèmes avec la spécificité CSS. Comme Magento2 utilise moins de compilation, la plupart des styles sont très spécifiques. Pour les remplacer, vos sélecteurs de styles doivent être plus ou moins spécifiques. Je ne publierai pas les détails du concept lui-même ici car il existe de nombreux articles en ligne.

Si vous utilisez la configuration LESS par défaut, assurez-vous que TOUT votre MOINS est écrit dans les requêtes multimédias M2 LESS. Si vous ne le faites pas, vous vous retrouverez avec des CSS en double et probablement des problèmes de spécificité.

Tout cela se résume à la spécificité et à l'ordre de chargement, votre CSS devrait se charger après les thèmes parents (ou modules), donc pour passer outre, tout ce que vous devez faire est de répondre à leur spécificité.

Par exemple, si le thème parent utilise

.parent-selector .selector {
    ...
}

Ensuite, vous devrez écrire le même sélecteur, si pour une raison quelconque, cela ne fonctionne pas, vous devez simplement ajouter un autre sélecteur avant. Un moyen simple consiste à ajouter du corps avant, car il couvre tous les sélecteurs et ajoute de la spécificité. Ainsi:

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

Cet article contient de bonnes informations sur la spécificité CSS.

Alternativement, vous pouvez remplacer le fichier entier

Si vous faites beaucoup de personnalisations, il est préférable d'écraser le fichier entier au lieu de l'étendre. Pour ce faire, ajoutez simplement le fichier à votre thème en utilisant le même chemin de fichier et le même nom.

Pour une priorité plus élevée, vous pouvez dupliquer le sélecteur:

  .home.home {
    display: none;
  }

Vous devez remplacer le même .lessfichier du thème parent que vous souhaitez remplacer, comme si vous souhaitez remplacer le _theme.lessfichier, alors vous devez copier ce fichier dans le thème enfant ici (assurez-vous que le même chemin d'accès du thème parent)

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

vous pouvez remplacer votre css ici.

Injecter vos fichiers css personnalisés est mieux.

En savoir plus: Comment ajouter un fichier CSS personnalisé dans Magento 2

Et Mage Docs: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-overview.html

N'oubliez pas de compiler en utilisant grunt / less pour traiter le css: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html