héritage – devfrontend.info

[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

20/01/2021 / admin

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

Notice: Trying to access array offset on value of type null in /home/mike/www/project/vendor/wikimedia/less.php/lib/Less/Tree/Variable.php on line 49
#1 Magento\Framework\View\Asset\PreProcessor\AlternativeSource->processContent() called at [vendor/magento/framework/View/Asset/PreProcessor/AlternativeSource.php:114]
#2 Magento\Framework\View\Asset\PreProcessor\AlternativeSource->process() called at [vendor/magento/module-developer/Model/View/Asset/PreProcessor/PreprocessorStrategy.php:78]
#3 Magento\Developer\Model\View\Asset\PreProcessor\PreprocessorStrategy->process() called at [vendor/magento/framework/View/Asset/PreProcessor/Pool.php:77]
#4 Magento\Framework\View\Asset\PreProcessor\Pool->process() called at [vendor/magento/framework/View/Asset/Source.php:152]
#5 Magento\Framework\View\Asset\Source->preProcess() called at [vendor/magento/framework/View/Asset/Source.php:105]
#6 Magento\Framework\View\Asset\Source->getFile() called at [vendor/magento/framework/View/Asset/File.php:158]
#7 Magento\Framework\View\Asset\File->getSourceFile() called at [vendor/magento/framework/App/StaticResource.php:146]
#8 Magento\Framework\App\StaticResource->launch() called at [vendor/magento/framework/App/Bootstrap.php:263]
#9 Magento\Framework\App\Bootstrap->run() called at [pub/static.php:13]

Notice: Trying to access array offset on value of type null in /home/mike/www/project/vendor/wikimedia/less.php/lib/Less/Tree/Variable.php on line 49

#1 Magento\Framework\View\Asset\PreProcessor\AlternativeSource->processContent() called at [vendor/magento/framework/View/Asset/PreProcessor/AlternativeSource.php:114]

#2 Magento\Framework\View\Asset\PreProcessor\AlternativeSource->process() called at [vendor/magento/module-developer/Model/View/Asset/PreProcessor/PreprocessorStrategy.php:78]

#3 Magento\Developer\Model\View\Asset\PreProcessor\PreprocessorStrategy->process() called at [vendor/magento/framework/View/Asset/PreProcessor/Pool.php:77]

#4 Magento\Framework\View\Asset\PreProcessor\Pool->process() called at [vendor/magento/framework/View/Asset/Source.php:152]

#5 Magento\Framework\View\Asset\Source->preProcess() called at [vendor/magento/framework/View/Asset/Source.php:105]

#6 Magento\Framework\View\Asset\Source->getFile() called at [vendor/magento/framework/View/Asset/File.php:158]

#7 Magento\Framework\View\Asset\File->getSourceFile() called at [vendor/magento/framework/App/StaticResource.php:146]

#8 Magento\Framework\App\StaticResource->launch() called at [vendor/magento/framework/App/Bootstrap.php:263]

#9 Magento\Framework\App\Bootstrap->run() called at [pub/static.php:13]

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:

// pour le user et le groupe:
chmown -R user_www:groupe_www dossier_du_site
// pour donner à user et group (ug) les droits de lecture/écriture (+rw)
chmod -R ug+rw dossier_du_site

// pour le user et le groupe:

chmown -R user_www:groupe_www dossier_du_site

// pour donner à user et group (ug) les droits de lecture/écriture (+rw)

chmod -R ug+rw dossier_du_site

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

26/01/2017 / admin

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 :

add_import_path "../../../rwd/default/scss"

1

add_import_path "../../../rwd/default/scss"

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.

[Magento 1.9] Héritage : définir un thème parent

26/01/2017 / admin

Dans app/design/frontend/nom_du_package/nom_du_theme/etc/theme.xml :

<theme> <parent>rwd/default</parent> </theme>

1
2
3

<theme>
    <parent>rwd/default</parent>
</theme>

Dans cet exemple, votre thème héritera du thème Default du package Rwd.

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

25/05/2016 / admin

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; }.

.box { padding: 12px; } .several-other-css-declaration { ... } .box { padding: 22px; } // <- déclaration qui sera prise en compte.

1
2
3

.box { padding: 12px; }
.several-other-css-declaration { ... }
.box { padding: 22px; } // <- déclaration qui sera prise en compte.

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 :

<div class="riri"> <div class="fifi"> <div class="loulou"> Les castors juniors </div> </div> </div>

1
2
3
4
5
6
7

<div class="riri">
  <div class="fifi">
    <div class="loulou">
      Les castors juniors
    </div>
  </div>
</div>

Dans l’ordre de priorité tu as :

.riri .fifi .loulou{ font-size: 12px } (le + important)

.fifi .loulou { font-size: 22px; }

.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.

04/06/2015 / admin

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

protected function createOrUpdateTheme($plugin, $applicationServices, $transactionManager) { $theme = parent::createOrUpdateTheme($plugin, $applicationServices, $transactionManager); try { $transactionManager->begin(); $theme->setParentTheme($applicationServices->getThemeManager()->getByName('<plugin_module>')); $theme->save(); $transactionManager->commit(); } catch (\Exception $e) { throw $transactionManager->rollBack($e); } return $theme; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    protected function createOrUpdateTheme($plugin, $applicationServices, $transactionManager)
    {
        $theme = parent::createOrUpdateTheme($plugin, $applicationServices, $transactionManager);

        try
        {
            $transactionManager->begin();
            $theme->setParentTheme($applicationServices->getThemeManager()->getByName('<plugin_module>'));
            $theme->save();
            $transactionManager->commit();
        }
        catch (\Exception $e)
        {
            throw $transactionManager->rollBack($e);
        }

        return $theme;
    }

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Archives

Méta

Taghéritage

[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

Le problème que j’ai rencontré:

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

Désactiver les caches Front-End

Désactiver le versionning des statiques

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

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

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

[Magento 1.9] Héritage : définir un thème parent

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

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

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

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

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

Taghéritage

[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

Le problème que j’ai rencontré:

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

Désactiver les caches Front-End

Désactiver le versionning des statiques

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

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

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

[Magento 1.9] Héritage : définir un thème parent

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

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

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

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