Comment ajouter un fichier CSS personnalisé dans Magento 2

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é?

magento2 css H. Ferrence
la source

Réponses:

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

Créer un thème: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
Assurez-vous que vous définissez votre application Magento sur le mode développeur.
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>

Appliquez votre thème: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
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

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

@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

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

Suivez la structure du répertoire

application / code / fournisseur / nom de module / vue / frontend (pour admin adminhtml) / web / css / filename.css
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

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