Magento2: Meilleure pratique pour modifier les fichiers css

14

Je souhaite modifier le fichier css pub/static/frontend/Magento/luma/en_US/css/styles-l.css.
Initialement, ce fichier n'est pas présent dans le dossier pub / statique et il est présent dans

vendor/magento/theme-frontend-blank/web/css/styles-l.less (it's styles-l.less)

Lorsque j'utilise un contenu statique en utilisant php bin/magento setup:static-content:deploy, 2 fichiers sont créés dans pub / static qui y sont liés.
1. pub/static/frontend/Magento/luma/en_US/css/styles-l.less
2. pub/static/frontend/Magento/luma/en_US/css/styles-l.css

Je suis un développeur soutenu et lors du développement de modules, j'ai tendance à supprimer tout ce qui est présent dans pub / static (sauf .htaccess). Donc, pour moi, cela ne semble pas être la meilleure option pour modifier directement pub/static/frontend/Magento/luma/en_US/css/styles-l.css.

Dans ce cas, quelle est la meilleure pratique pour modifier le fichier css ci-dessus?
1. Dois-je modifier pub/static/frontend/Magento/luma/en_US/css/styles-l.lessou
2. Ma compréhension est erronée que je puisse tout supprimer de pub/static(pendant le développement) et que je devrais le modifier pub/static/frontend/Magento/luma/en_US/css/styles-l.csset ne jamais le supprimer.

magento2 css frontend best-practice amitshree
la source

19

Vous ne devez pas éditer / modifier des fichiers dans le répertoire pub / * ou vendor / *. Pub est pour le déploiement et le fournisseur est pour la structure par défaut, que vous remplacez via votre modèle ou des modules personnalisés. Au lieu:

créez un nouveau thème dans app / design / frontend / {vendor} / {yourTheme} /. Vous pouvez utiliser le thème Blank ou Luma. Vous pouvez également créer un nouveau thème qui hérite de Blank (l'héritage est défini dans theme.xml). Si vous utilisez déjà un thème, sautez cette étape.
modifiez .less dans votre thème afin que les modifications restent visibles et ne soient pas remplacées lors de l'effacement du cache ou de la mise à niveau du système.
Utilisez grunt pour compiler votre .less dans des fichiers de déploiement.
Vous pouvez également configurer des sourcemaps pour localiser votre style dans les fichiers .less du thème afin d'être plus productif.

Quelques références utiles:

g5wx
la source

Je vous remercie. J'utilise le thème Templatemonster/themeet styles-l.lessn'est pas présent dans le thème. Dois-je copier vendor/magento/theme-frontend-blank/web/css/styles-l.lesspour l' app/design/frontend/Templatemonster/theme/web/css/styles-l.lessutiliser / le modifier?

amitshree

2

Non, vous devez éditer moins de fichiers dans Templatemonster / theme - styles - *. Moins de fichiers dans le répertoire pub sont déjà des fichiers compilés à partir de votre thème et d'autres ressources et ne doivent pas être modifiés / altérés. Lorsque vous avez terminé de modifier vos fichiers dans votre thème TM, exécutez grunt pour les compiler dans les ressources finales, qui seront déployées dans le dossier pub. Vous pouvez également utiliser des sourcemaps pour localiser le moins de fichiers de votre thème.

g5wx

Merci encore. Juste pour clarifier, si je dois modifier la propriété des classes présentes dans styles-l.lessdu magento/theme-frontend-blankthème que je devrais utiliser / remplacer ces classes dans l' une des (ou nouveaux) fichiers css dans mon thème de TM et de modifier en conséquence. Le magento/theme-frontend-blankthème se comporte- t-il de la même manière que le base/defaultthème fonctionnait dans Magento1?

amitshree

1

Oui, toutes les modifications que vous souhaitez créer doivent être reflétées dans votre modèle afin que la portée de la modification reste locale dans ce modèle et ne soit pas annulée lors des mises à niveau. Le modèle vierge dans M2 a la même fonction de base que la valeur par défaut dans M1 - c'est-à-dire avoir une définition de base déjà créée et votre thème étendu peut avoir un repli pour les éléments que vous ne modifiez pas.

g5wx

4

Cette approche a fonctionné pour moi

Apportez les modifications nécessaires dans le fichier .less, puis exécutez les commandes suivantes:

php bin/magento setup:upgrade

php bin/magento cache:flush

adityaekawade
la source

3

Si un autre thème que vous devez configurer:

module.exports = {
    blank: {
        area: 'frontend',
        name: 'Magento/blank',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/email',
            'css/email-inline'
        ],
        dsl: 'less'
    },
    luma: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

    porto: {
        area: 'frontend',
        name: 'Smartwave/porto',
        locale: 'zh_Hans_CN',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

    backend: {
        area: 'adminhtml',
        name: 'Magento/backend',
        locale: 'en_US',
        files: [
            'css/styles-old',
            'css/styles'
        ],
        dsl: 'less'
    }
};

Patrick-Peng
la source

2

Dans le fichier dev / tools / grunt / configs / theme.js

Patrick-Peng

3

Ceci est l'organigramme indiquant comment magento2 traite les fichiers css.

Source: Inchoo

Prince Patel
la source

0

Je suggère d'exécuter

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

Comme vous le savez,

php bin/magento setup:upgrade

nettoiera le cache et le contenu statique, et

php bin/magento setup:static-content:deploy

déploiera tous les thèmes dans le <mageroot>/pubdossier. Cette commande réduira considérablement la première charge de votre magasin.

Aakash
la source

Magento2: Meilleure pratique pour modifier les fichiers css

Réponses: