Note 1: Cela supposera toujours que vous prolongez magento-blank.
Note 2: <theme-dir>estapp/design/frontend/Vendor/theme/
Les bases: Changer les variables de base
(pour tl; dr, passez à la conclusion)
La plupart des guides que j'ai trouvés ne couvrent que cette étape de la thématisation avec LESS, je vais donc essayer de rester bref. Magento 2 dispose d'un ensemble de base de variables qui définissent les aspects les plus couramment utilisés d'un thème. Les couleurs, les polices, le style des titres de page, etc. sont définis dans ces variables.
En <magento-root>/lib/web/css/source/lib/variables/vous trouverez un certain nombre de fichiers les moins intuitivement nommés. Dans chacun de ceux-ci, vous pouvez trouver des valeurs assignées à des variables pour de nombreux éléments communs dans Magento 2.
Pour modifier l’une de ces variables, créez simplement un fichier dans <theme-dir>/web/css/source/_theme.less.
Exemple:
@newPrimary: #1980fe;
@primary__color: @newPrimary;
@link__color: @newPrimary;
@link__visited__color: lighten(@link__color, 10%);
Techniquement, vous pouvez mettre n'importe quel CSS ou MOINS ici, et cela s'appliquera avec succès à votre site (mais ne le faites pas). Je vais expliquer comment cela fonctionne dans un instant.
Ajouter un nouveau fichier CSS
Vous pouvez ajouter un nouveau CSS à la tête de toutes vos pages de modèle.
Créer <theme-dir>/Magento_Theme/layout/default_head_blocks.xml:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/myStyle.css" />
</head>
</page>
Et puis vous créez un fichier avec votre nouveau CSS ou LESS:
<theme-dir>/web/css/myStyle.less. Vous pouvez écrire MOINS ou CSS ici.
Remplacement des styles existants
J'ai trouvé que Magento 2 LESS n'est pas facilement remplacé par la simple addition d'un nouveau fichier CSS. Et c’est là que j’ai commencé à me perdre, et j’expliquerai comment Magento 2 trouve ses fichiers LESS.
Par défaut, Magento 2 inclura (et retombera finalement) sur ces fichiers:
<Magento_Blank_theme_dir>/web/css/styles-m.less //Mobile Styles
<Magento_Blank_theme_dir>/web/css/styles-l.less //Desktop enhancements
<Magento_Blank_theme_dir>/web/css/print.less //Print Styles
Ces fichiers incluent (importent) d'autres fichiers LESS, qui incluent souvent encore plus de fichiers LESS. Et c’est là que d’autres guides m’ont été inutiles et j’expliquerai au mieux ce que j’ai trouvé.
La source / lib Magic
Dans styles-m.less, il y a la ligne: @import 'source/lib/_responsive.less';. Vous remarquerez qu'il n'y a pas de source/librépertoire dans le magento-blankthème. Il est évident que les styles de Magento 2 finissent par tomber <magento-root>/lib/web/css/. C'est là que vous trouvez source/lib/_responsive.less.
Les variables que vous utilisez _theme.lesssont disponibles en raison d’un source/libfichier importé dans le magento-blankthème. Remarque: _theme.less est un fichier vide dans les thèmes par défaut. Poursuivez votre lecture pour savoir pourquoi il est important de noter.
Fichiers MOINS "inclus automatiquement"
Quelques guides que j'ai trouvés ont insisté pour que vous puissiez les créer, <theme-dir>/web/css/_styles.lesscar Magento recherche et inclut automatiquement ce fichier. J'ai trouvé que c'était un mauvais conseil.
Si vous créez <theme-dir>/web/css/_styles.less, votre site va casser. theme-frontend-blank/web/css/styles-m.lessimports _styles.less, qui à son tour importe 3 autres fichiers .less, qui importent encore plus de fichiers .less.
Si vous créez un _styles.less, vous le remplacez. En écrasant _styles.less, vous écrasez tous les fichiers importés, tous les fichiers importés par ces fichiers, etc.
Remarque à propos de _theme.less: Ce fichier est vide dans les thèmes par défaut. Par conséquent, vous pouvez simplement créer et ajouter des éléments en toute sécurité si vous basez votre thème sur un thème par défaut. Toutefois, si vous étendez un thème qui étend déjà un thème par défaut, il est probable que vous l'utilisiez_theme.lessdéjà. Créer à nouveau le remplacera.
Le @magento_import magique
En styles-m.lessvous verrez quelques lignes en commentaire:
//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets
Ces lignes ne sont pas commentées! Magento 2 a un traitement spécial pour les lignes qui commencent par //@magento_import. Ces lignes ne peuvent être incluses dans les fichiers qu’à l’adresse <theme-dir>/web/css.
Les lignes ci-dessus indiquent à Magento 2 d'inclure tout fichier dans le thème qui suit le modèle donné. Ainsi, les lignes ci-dessus comprendront automatiquement:
'<theme-dir>/Magento_Catalog/web/css/source/_widgets.less';
'<theme-dir>/Magento_Catalog/web/css/source/_module.less';
'<theme-dir>/Magento_Cms/web/css/source/_widgets.less';
'<theme-dir>/Magento_Cms/web/css/source/_module.less';
'<theme-dir>/Magento_Reports/web/css/source/_widgets.less';
'<theme-dir>/Magento_Reports/web/css/source/_module.less';
...and so on
Ajouter des noms de fichiers _widgets.lesset _module.less sera automatiquement trouvé et inclus, même s’il s’agit d’un nouveau module ou d’un module qui n’a pas déjà ce fichier.
Sachez que Magento-Blank inclut ces fichiers pour la plupart des modules. Si vous souhaitez utiliser cette méthode, vous devrez copier-coller les originaux (à moins que vous ne fassiez une réécriture complète).
Conclusion
(Lire: ne pas utiliser _styles.less).
Lorsque vous souhaitez modifier le code CSS d'un élément, vous souhaitez faire de votre mieux pour trouver le fichier dans lequel ce style est défini. Parfois, il vous suffit de modifier une variable _theme.less. La plupart du temps, je suppose, vous aurez simplement besoin de copier-coller le _module.lessou _widgets.lessdans votre thème et d’apporter les modifications.
Si vous avez créé un nouveau module ou avez créé de nouveaux éléments HTML, vous devrez peut-être créer un fichier LESS et l'inclure séparément dans <head>chaque page.
Dans les cas compliqués, vous devrez peut-être créer un nouveau @importou @magento_import. Vous voulez trouver l'enfant le plus bas qui convient à ce que vous faites, afin de ne pas copier-coller un tas de fichiers inutiles ou ajouter des @importlignes confuses qui semblent ne mener nulle part.