Comment ajouter un fichier CSS personnalisé dans Magento 2

30

Existe-t-il un moyen de créer mon propre fichier CSS qui se charge en dernier dans la cascade?

Si oui, comment et où ajouter mon fichier CSS personnalisé?

H. Ferrence
la source

Réponses:

43

Pour ajouter des CSS personnalisés et charger en dernier, vous devez configurer un thème personnalisé.

  1. Créer un thème: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
  2. Assurez-vous que vous définissez votre application Magento sur le mode développeur.
  3. Ajoutez les dossiers suivants à votre thème personnalisé

-

 app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
 app / design / frontend / [vendor] / [theme] / web / css

Créez les fichiers suivants:

app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

placez ce code dans default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>
  1. Appliquez votre thème: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
  2. Déployer des ressources statiques (SSH vers la racine magento):

-

php bin/magento setup:static-content:deploy
Joshua34
la source
Salut, je viens de le faire, mais le fichier css que j'ajoute ne se charge pas, et lorsque j'inspecte la page, il me donne une erreur GET pour le fichier, avec un 500 (erreur interne du serveur) avez-vous une idée de ce qu'il pourrait être?
alexcr
1
Commande CLI à déployer: configuration de php bin / magento: static-content: deploy
Joshua34
Que dois-je mettre dans les deux nouveaux fichiers CSS que j'ai créés? Juste du CSS pur ??
styzzz
1
@styzzz oui, le CSS brut est ok.
Joshua34
Ouaip. Je viens de le faire, j'ai téléchargé les fichiers local-m.css et local-l.css sur web / css .... effacé le cache et exécuté php bin / magento setup: static-content: deploy. Je suis en mode développeur. Il ne les ramasse toujours pas. Mon default_head_blocks.xml est exactement comme ci-dessus. Mais ce n'est toujours pas en utilisant ces stypes que j'ai définis dans le CSS
styzzz
15

Afin d'ajouter des CSS personnalisés et de charger en dernier

  1. Suivez la structure du répertoire

    application / code / fournisseur / nom de module / vue / frontend (pour admin adminhtml) / web / css / filename.css

  2. Ajoutez le chemin du fichier css au fichier de mise en page correspondant comme indiqué ci-dessous

    <head>
      <css src="Vendor_Module::css/filename.css"/>
    </head>
    <body>
     ....
    </body>
    
Manish
la source
Y compris Vendor_Modulene fonctionne pas pour moi. Le retirer fonctionne bien.
Saravanan DS
@SaravananDS vous devez remplacer par le nom de votre package et module.
Manish
Oui. Après avoir remplacé avec ma coutume Vendor_Moduleseulement, cela ne fonctionne pas.
Saravanan DS
@Manish, pouvons-nous charger un fichier css personnalisé uniquement dans la page de résultats de recherche?
jafar pinjar
Ici pas besoin d'utiliser un thème enfant?
HaFiz Umer
5

Vous pouvez ajouter l'attribut media que magento 2 mettra à la fin du CSS dans la section head. La définition d'une largeur de seulement 1px l'activera sur tous les appareils:

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>
Cypher909
la source
merci, vous m'avez sauvé la journée. Je veux travailler avec des fichiers .less et les compiler chaque fois que je les édite.
bourax
ici pas besoin de faire un thème personnalisé d'abord?
HaFiz Umer
@HaFizUmer Vous devez d'abord créer un thème personnalisé. Suivez les instructions de la réponse acceptée, puis utilisez la méthode que je montre ici.
Cypher909