Étiquette : héritage

[Webpack Encore] Résoudre les problèmes d’imports et de sous-imports de composants JS à l’utilisation de frameworks comme UiKit ou Foundation 6

Note: vous pouvez vous référer à l’article: [Webpack Encore] Utiliser la méthode addAliases pour résoudre les problèmes de sous-imports de fichiers sass/scss à l’utilisation de frameworks comme UiKit ou Foundation 6 pour résoudre la même question côté CSS.

Sources:

Erreur: « ./node_modules/uikit/src/js/api/boot.js » contains a reference to the file « uikit-util ».

Utiliser la méthode addAliases() de Webpack Encore pour créer un alias vers le chemin de référence du fichier non trouvé dans node_modules. Dans le fichier webpack.config.js:

Etendre la configuration de Webpack Encore pour faciliter la surchage et l’écrasement de fichiers JS

Dans le fichier webpack.config.js:

Ici, Webpack va d’abord chercher le fichier JS dans le dossier assets. Si il ne le trouve pas, il va se rabattre sur le dossier node_modules.

Ajouter un console.log(config); vous permettra de visualiser la config au format JSON dans votre console.

Importer uniquement une sélection de modules issus d’un framework (et pas tout le framework)

Dans le fichier JS qui sert de point d’entrée à Webpack (dans mon exemple assets/app.js):

Dans le fichier JS qui sert à importer uniquement les modules voulus (dans mon exemple assets/uikit.js):

Ici, j’importe uniquement les modules notification, tooltip et uikit-icons. Le fichier généré par webpack pour le front ne contiendra pas le code des autres modules du framework UIkit.

[Magento 2] Les fichiers styles-m.css ou styles-l.css ne se génèrent pas dans le cadre d’un thème qui hérite de Blank ou de Luma

Quelques trucs à vérifier:

Le problème que j’ai rencontré:

Magento 2 ne parvient pas à me générer « styles-m.css » par exemple; j’ai ce message d’erreur lorsque j’essaye d’afficher dans le navigateur, la source du fichier http://mon-site.local/static/version1611129694/frontend/MyVendor/mytheme/fr_FR/css/styles-m.css

Vérifier l’héritage des thèmes via l’interface d’admin

CONTENU > Design > Configuration.
La première rangée doit être renseigner avec le thème dont vous héritez (si vous décidez d’hériter d’un thème). Ce n’est qu’à partir de la seconde rangée que vous assignerez votre ou vos thème(s) custom.

Exemple: première rangée du tableau (« Par défaut: Global », « Nom du thème: »), assigner le thème « Magento Blank » (ou Luma, selon celui duquel votre thème custom hérite).
A partir de la seconde rangée seulement, assignez votre ou vos thème(s) custom.

On n’oublie pas de vider tous les caches suite à cette modification!

Désactiver les caches Front-End

Via la commande bin/magento cache:disable full_page block_html layout

Désactiver le versionning des statiques

Via la commande bin/magento config:set dev/static/sign 0

Assigner les droits sur tous les fichiers de l’instance (sur tout le projet)

Deux commandes à saisir l’une après l’autre:

Vérifier l’arbo et les noms des fichiers dans votre thème custom

Ces derniers doivent correspondre au modèle Magento 2 afin que l’héritage se fasse correctement.

Exemple: lorsque vous héritez de Blank, un fichier web/css/source/_extend.less (ATTENTION pas de « s » à la fin de « extend »!!! doit vous servir à importer vos fichiers LESS spécifiques.

[Magento 1.9] Un héritage propre des fichiers SASS dans un thème Custom

Source officielle : Magento 1.9 Responsive Web Design Developer’s Guide > Advanced topics > SASS fallback structure.

Un des soucis majeurs de l’utilisation de SASS est qu’on ne peut pas utiliser de variable dans les chemins d’imports des fichiers *.scss. Ceci reviendrait à devoir, lorsqu’on crée un thème custom, copier l’intégralité des fichiers *.scss du thème parent (y-compris donc ceux qui ne feront l’objet d’aucune surcharge ou ré-écriture). Résultat : énormément de doublons dans les styles chargés en front, puisqu’on récupère l’intégralité des styles du thème parent et ceux du thème enfant.

La solution est d’ajouter la ligne suivante dans le fichier config.rb du thème enfant (ATTENTION: la doc officielle est fausse puisqu’elle recommande de faire la modification dans le fichier config.rb du thème parent !

Si on choisit le thème Rwd et le package Default en tant que fallback :

Les chemins sont relatifs, donc attention à modifier cet exemple en fonction de l’emplacement de votre fichier config.rb (et de votre arbo en général si elle est custom).

Pour plus d’infos, cf la doc officielle donnée en lien plus haut.

[CSS] Les règles d’héritage

Demo JSFiddle.net

A part !important, est-ce qu’il existe des trucs propres pour qu’un style prenne le dessus sur un autre avec lequel il est en concurrence?

La surcharge par ordre de déclaration dans la CSS :

Pour prendre la main, t’as la surcharge : tu déclares .box { padding: 12px; } puis plus loin, tu re-déclares .box { padding: 22px; }.

C’est toujours la dernière déclaration rencontrée pour un élément donné qui est prise en compte et qui écrase toutes les précédentes.

Le ciblage par précision dans le chemin (dans le DOM) qui permet d’atteindre l’élément :

Code HTML :

Dans l’ordre de priorité tu as :

  1. .riri .fifi .loulou{ font-size: 12px } (le + important)
  2. .fifi .loulou { font-size: 22px; }
  3. .loulou { font-size: 42px; } (le – important)

Et là, plus tu seras précis dans la manière (le chemin) de cibler ton élément, plus tes styles prendront le dessus peu importe l’ordre dans lequel ils sont déclarés dans ta/tes CSS.

Il y a encore un cas supplémentaire dans la demo JSFiddle.net, donc à voir et à utiliser pour manipuler d’autres cas à l’avenir.

[Change cross commerce] Déclarer une dépendance d’un thème existant dans un nouveau thème.

Dans App/Themes/<plugin>/<module>/Setup/Install.php, dans la classe Install extends \Change\Plugins\ThemeInstallBase :