Magento2: Re générer un fichier css dans un dossier pub / static


51

J'ai installé Magento 2 et défini le mode développeur, puis j'ai installé un module contenant des fichiers css et js. Le module fonctionne bien et les fichiers css et js sont rendus à partir du dossier pub / static. Maintenant, j'ai apporté des modifications css au fichier css du répertoire du module et à l'exécution de la commande

php bin/magento setup:static-content:deploy

mais Magento ne fait pas mes nouvelles modifications dans les fichiers css pub / static, donc je récupère le contenu des anciens fichiers css. Est-ce que quelqu'un sait comment régénérer le fichier css entier dans le dossier pub / static?


8
Pour votre information: Magento 2 a un mode développeur, vous n’aurez donc pas à déployer du contenu statique tout le temps. Au cours du dernier mois, j'ai perdu des heures et des heures en redéployant du contenu statique. Alors ne soyez pas comme moi, et passez en mode développeur (sur votre ordinateur local. Votre serveur doit être en mode production)
Nathan Merrill

pourquoi se régénérer avec une version différente ??? J'ai un problème avec la version du fichier de déploiement ne correspond pas. magento.stackexchange.com/questions/94502/…
Magento2 Devloper

3
Si magento est en mode développeur, il créera des liens symboliques vers les fichiers statiques, mais pour ce faire, vous devez avoir un .htaccessfichier dans le pub/staticdossier afin qu'il sache comment lier les fichiers, si vous avez supprimé le dossier pub / static qui .htaccessmanque maintenant
Vlad Patru

@NathanMerrill, vous avez vraiment raison, mais la plupart des développeurs ne lisent pas la documentation ni toutes les réponses et continuent d'exécuter la commande static-content: deploy , perte de temps
Vlad Patru

Réponses:


69

Avant de supprimer pub / static, sauvegardez pub / static / .htaccess et restaurez-le. sinon, tous vos css et js afficheront une erreur 404!

  1. Supprimer pub/static[Gardez le fichier .htaccess sauvegardé et copiez-le à nouveau]
    1. Retirer var/cache
    2. Retirer var/composer_home
    3. Retirer var/generation
    4. Retirer var/page_cache
    5. Retirer var/view_preprocessed
    6. courir php bin/magento setup:static-content:deploy

48
M2 ne rend pas les choses très conviviales pour les développeurs.
Matthew McLennan

10
@CarComp Aucun fichier ne devrait être supprimé manuellement. Magento devrait s'en occuper. c'est très énervant
Claudiu Creanga

10
U doit être nouveau sur magento;)
CarComp

6
Je pense qu'en supprimant pub / static, vous perdez également le fichier .htaccess qui est important pour éviter les erreurs 404. Vous pouvez également supprimer les sous-dossiers de pub / static, mais vous devez conserver
.htaccess

3
Je suis nouveau sur "magento". WAT? Est-ce la manière officielle de mettre à jour les CSS?
puchu

20

les réponses ici ne mentionnent pas que vous ne devriez pas supprimer le .htaccess dans le dossier pub / static.

pour supprimer tous les fichiers sauf les .htacces, entrez dans le répertoire pub / static et exécutez

find . -depth -name .htaccess -prune -o -delete

alors vous pouvez courir

rm -rf var/cache/ var/generation/ var/page_cache/ var/view_preprocessed/ 

pourquoi se régénérer avec une version différente ??? J'ai un problème avec la version du fichier de déploiement ne correspond pas. magento.stackexchange.com/questions/94502/…
Magento2 Devloper

1
n'a pas fonctionné comme prévu
Christophe Ferreboeuf

11

Je viens de supprimer les fichiers css du pub/staticdossier et exécuter la commande:

php bin/magento setup:static-content:deploy

Il générera le même fichier avec les dernières modifications.


pourquoi se régénérer avec une version différente ??? J'ai un problème avec la version du fichier de déploiement ne correspond pas. magento.stackexchange.com/questions/94502/…
Magento2 Devloper

9

Comme la question est pour la js and cssmise à jour dans Magento 2 en mode développeur .

  1. Mettre à jour le JS dans votre module respecté, avant d'actualiser la page du même fichier depuis le pub/static/frontend/namespace/theme/ ... module/js/...supprimer, afin qu'après le rafraîchissement de la page, un nouveau fichier JS soit généré dans le dossier pub.
  2. Mise à jour du CSS dans votre module respecté, faites le pt 1.
  3. Mise à jour du fichier Less

Thème d'installation dans magento ...\dev\tools\grunt\configs\themes.js

Cloner un thème, par exemple, un thème luma sur votre thème et attribuer un nom, supposons xyz

xyz: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    }

Dans le dossier racine, changez le nom du fichier: Gruntfile.js.sample en Gruntfile.js

Dans le dossier racine, changez le nom du fichier: package.json.sample en package.json

Besoin d'avoir Grunt dans votre dossier de site sinon installer via NPM

Ouvrir une invite de commande avec l' autorisation de l'administrateur

Aller au dossier du site dans CMD et appuyer sur la commande grunt exec:themepour la première fois après le déploiement du thème

Puis grunt less:theme chaque fois si nous faisons des changements en moins

Si vous faites fréquemment des changements en moins d’utilisation grunt watch, il sera automatiquement touchégrunt less:theme

Remarque: vous pouvez obtenir une erreur Symlink . Allez dans le fichier .../app/etc/di.xmlet commentez ou supprimez le code (sous le code) dans votre développement local, ne transmettez pas le code chnaged de ce fichier au serveur, il n’est requis que si nécessaire.

<item name="view_preprocessed" xsi:type="object">Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink</item>

7

Manière simple 1

Dans l’administrateur de Magento. Accédez à System > Tools > Cache Managementet cliquez sur Vider le cache de fichiers statiques .

Manière simple 2

Si vous venez de modifier le fichier css qui existait déjà , vous devez simplement supprimer le fichier correspondant pub/static, puis, lorsque vous actualisez la page, le nouveau fichier css sera généré. Cela fonctionne en mode développeur .


Remarquer

  1. Lorsque vous créez un nouveau fichier, plutôt que de modifier un fichier existant, vous devrez peut-être également vider le cache php bin/magento cache:flush.

  2. Le mode par défaut et le mode développeur n'ont pas besoin de déployer des fichiers de vue statique , car les fichiers statiques sont générés de manière dynamique plutôt que matérialisés. (Référence: À propos des modes Magento )

  3. En mode production , vous aurez peut-être aussi besoin de, php bin/magento setup:static-content:deployet php bin/magento cache:flushje n’essaye pas encore en mode production .


6

Ok, donc, sur la base de ce que j'ai lu dans divers autres articles et de mon expérience personnelle, voici le processus de régénération du CSS ou de tout contenu statique:

php bin/magento setup:upgrade

Cela effacera tous les fichiers de cache / génération / etc nécessaires sans supprimer tout ce dont vous avez réellement besoin.

php bin/magento setup:di:compile

Cela recompilera ensuite les fichiers. Enfin:

php bin/magento setup:static-content:deploy

Après la dernière commande, tout devrait être nouveau et frais, actualisez simplement votre page.

----- Remarques ------

1) Assurez-vous que vos autorisations de fichiers et votre propriétaire: le groupe d'utilisateurs est configuré correctement avant de procéder. Vous devrez peut-être en parler avec votre administrateur système.

2) Si votre commande setup: upgrade échoue, cela pourrait effacer les fichiers et être incapable d’écrire les nouveaux, comme ce fut mon cas en raison des autorisations accordées. Cela peut endommager votre site. Il vous suffit de repasser les autorisations, puis de relancer la commande.

3) Je n'ai pas trouvé (jusqu'à présent) un moyen de ne recompiler qu'un thème ou un fichier spécifique (ce serait très utile si quelqu'un trouve un moyen) sans écrire un script entièrement personnalisé.

Si quelqu'un sait quelque chose de mieux, faites-le-moi savoir, car 12 minutes de compilation de fichiers, car je devais apporter des modifications CSS, est extrêmement médiocre à mes yeux.

--- Modifier ---

Grento est lié à Magento 2, ce qui facilite infiniment l'actualisation des fichiers CSS / LESS si vous prenez le temps de le configurer. La plupart des fichiers sont là en tant que fichiers .sample, il suffit de supprimer l’extension de fichier .sample, de configurer le fichier themes.js dans le dossier / dev / tools / grunt / configs. Ensuite, lorsque vous devez actualiser vos fichiers LESS, vous exécutez simplement grunt less: - theme-- à partir de la ligne de commande.

Ressource: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html


Arrêtez de fournir la configuration de bin / magento php: static-content: méthode deploy, en mode développeur magento a des liens symboliques
Vlad Patru

Oh et supprimer manuellement les dossiers, supprimer les fichiers .htaccess et autres sans lien, et le forcer à reconstruire est la meilleure méthode ??? J'ai ajouté un commentaire sur l'utilisation de Grunt, car le fait de passer votre magasin en mode développeur n'instancie pas tous les liens symboliques et actualise votre css sur le rechargement de page.
Vallier

6

ne pas oublier d'exécuter les grunt exec:theme, grunt less:themecommandes où themeest le thème que vous avez déclaré dans le themes.jsfichier à partir du dossier de configuration de grognement (tout cela est dans le guide du développeur) et quand vous avez magento en mode développeur vous ne devriez pas exécuter la commande deploy statique, Magento2marche avecSymlinks


1
"lorsque vous avez magento en mode développeur, vous ne devez pas exécuter la commande de déploiement statique" <- Cela m'a été extrêmement utile. Merci! Je viens de supprimer le contenu du répertoire pub / static (sauf pour .htaccess bien sûr), d'actualiser la page et les symliks de mes fichiers css ont été générés automatiquement. Maintenant, je peux les éditer à la volée. Qui a dit que Magento 2 n'était pas convivial?! Juste besoin de savoir comment l'utiliser, je suppose.
Rooster242

1
Salut merci compagnon, grognement moins: défaut résolu le problème
Yusuf Ibrahim

6

Exécutez ces commandes sur votre dossier racine Magento :

alias mage="php -d memory_limit=-1 -f bin/magento"

chmod -R 775 pub/static/ var/ pub/media/ &&
rm -rf var/view_preprocessed/ var/cache/ var/page_cache/ var/tmp/ var/generation/ pub/static/frontend/ ;
mage cache:flush &
mage indexer:reindex &
mage setup:upgrade &&
mage setup:static-content:deploy ; 
mage setup:db-data:upgrade &&
mage dev:source-theme:deploy &&
chmod -R 775 pub/static/ pub/media/ var/

Jamais pensé à exécuter un réindex en arrière-plan
Sergei Filippov

Est-ce moi ou ces commandes Magento 1 en réponse à une question Magento 2?
Barry le

Il n'y a pas de commandes Magento 1, elles viennent de Magento 2
Rafael Corrêa Gomes

6

Il y a une remarque importante à faire à propos de cette question que la plupart des réponses n'indiquent pas spécifiquement. Dans votre cas (avec la configuration que vous utilisez), la raison pour laquelle vos modifications CSS ne sont pas prises en compte lorsque vous régénérez le CSS dans le pub/staticdossier est que vous ne supprimez pas le contenu du var/view_preprocesseddirecteur. Dans ce répertoire, vous trouverez une version en cache de votre CSS qui s’affiche dans le pub/staticdossier lorsque vous exécutez la php bin/magento setup:static-content:deploycommande.

Ainsi, lors de la recompilation, Magento recherchera d'abord le var/view_preprocesseddossier contenant le CSS mis en cache. Si ce dossier est vide, il recherchera les fichiers de thème et extraira ce CSS pour la compilation.

Ces paramètres sont configurables. Il existe donc de nombreuses façons d’arriver à votre destination qui changeront le chemin à suivre. Mais pour la solution à votre configuration spécifique:

  1. Supprimez les fichiers du pub/staticdossier:rm -rf pub/static/*

  2. Supprimez les fichiers du var/view_preprocesseddossier:rm -rf var/view_preprocessed/*

  3. Recompiler le dossier statique de publication: php bin/magento setup:static-content:deploy

  4. Effacer le cache est activé: php bin/magento cache:clean

  5. Actualisez le navigateur.


1
ce serait bien si magento2 créait des liens symboliques vers les fichiers concernés en mode développeur, les modifications apportées à ces fichiers de module étaient alors visibles à la volée
roman204

Oui, mais je ne sais pas trop quand et comment, je n'ai pas mentionné cela dans la réponse. Il existe des fichiers de configuration globaux qui peuvent définir cela dans votre app/etc/di.xmlfichier di.xml ( ). Mais j'ai eu des résultats mitigés lors des tests. Il y a un peu plus ici dans la deuxième réponse: magento.stackexchange.com/questions/116605/…
circlesix

5

Supprimez le dossier qui contient votre thème dans le
cache transparent pub / static / frontend.
Vous pouvez utiliser grunt pour regarder les feuilles de style appliquées. Lire ici


pourquoi se régénérer avec une version différente ??? J'ai un problème avec la version du fichier de déploiement ne correspond pas. magento.stackexchange.com/questions/94502/…
Magento2 Devloper

5
  1. Supprimez les charges statiques
  2. Donne la pub/staticpermission à 777
  3. Vider le cache.
  4. Courir: php bin/magento setup:static-content:deploy

Vous verrez de nouveaux css.

REMARQUE:

Donnez les droits de dossier et de fichier appropriés.

J'espère que cela t'aidera.


"Vous verrez de nouveaux fichiers css." - Je n'ai pas mais merci
Barry

4

Ne pourriez-vous pas simplement vider le cache statique dans le panneau d'administration, puis

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

1

Assurez-vous que vous utilisez le mode développeur.

Puis exécutez le code suivant:

chmod -R 777 var generated pub/static
grunt exec:default
grunt less:your_theme_name

Actualiser la page d'accueil, Ces étapes ont résolu mon problème.


sympa, ça m'aide vraiment merci
Yoesoff

0

Cependant, vous pouvez ajouter l' indicateur -fou --forceà la commande d'installation.

Exemple:

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

0

Je vais déposer ma gouttelette de sagesse ici.

J'utilise un cache_fly.shscript bash qui fait essentiellement:

#!/bin/bash
start=`date +%s%N`
./magento setup:upgrade && \ 
./magento cache:flush && \ 
./magento setup:static-content:deploy -f
end=`date +%s%N`
runtime=$(bc <<< "scale=9;($end-$start)/1000000000")
echo "" && echo "" && echo -e "\e[34mTOTAL EXECUTION TIME: \e[1m\e[93m$runtime\e[0m"

NOTE: J'ai ajouté un écho pour me montrer combien de fois de ma vie j'ai perdu à attendre que ça fonctionne. Est également ./magentoun script à faire php bin/magentoou à appeler la même chose à l'intérieur du conteneur de docker, si docker est utilisé, vous pouvez indiquer le vôtre, php bin/magentomais si vous lisez ceci, vous devez savoir de quoi je parle, sinon, lancez la requête pour aider.


0

Petite adaptation pour mon cas

#!/bin/bash
start=`date +%s%N`
chmod -R 775 pub/static/ var/ pub/media/ && \
rm -rf var/view_preprocessed/* var/cache/* var/page_cache/* var/tmp/* var/generation/* pub/static/frontend/* && \
./magento cache:flush && \
./magento setup:upgrade && \
./magento cache:clean && \
./magento s:s:d es_ES en_US -f && \
./magento setup:di:compile && \
chmod -R 775 pub/static/ pub/media/ var/
end=`date +%s%N
runtime=$(bc <<< "scale=9;($end-$start)/1000000000")
echo "" && echo "" && echo -e "\e[34mTOTAL EXECUTION TIME: \e[1m\e[93m$runtime\e[0m"
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.