Come aggiungere un file CSS personalizzato in Magento 2

C'è un modo per creare il mio file CSS che si carica per ultimo nella cascata?

In tal caso, come e dove devo aggiungere il mio file CSS personalizzato?

magento2 css

— H. Ferrence
fonte

Risposte:

Per poter aggiungere css personalizzati e caricare l'ultimo, è necessario impostare un tema personalizzato.

Crea tema: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
Assicurati di impostare l'applicazione Magento sulla modalità sviluppatore.
Aggiungi le seguenti cartelle al tuo tema personalizzato

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

Creare i seguenti file:

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

inserisci questo codice in 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>

Applica il tuo tema: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
Distribuire risorse statiche (da SSH a root magento):

php bin/magento setup:static-content:deploy

— Joshua34
fonte

Ciao, l'ho appena fatto, ma il file css che aggiungo, non viene caricato, e quando controllo la pagina mi dà un errore GET per il file, con un 500 (Errore interno del server) hai idea di cosa potrebbe essere?

— alexcr,

Comando CLI per distribuire: php bin / magento setup: static-content: deploy

— Joshua34

Cosa devo inserire nei due nuovi file CSS che ho creato? Solo puro CSS ??

— Styzzz,

@styzzz sì, il css crudo è ok.

— Giosuè34,

Sì. L'ho appena fatto, ho caricato i file local-m.css e local-l.css su web / css .... svuotato la cache e ho eseguito php bin / magento setup: static-content: deploy. Sono in modalità sviluppatore. Non li sta ancora raccogliendo. Il mio default_head_blocks.xml è esattamente come sopra. Ma non sta ancora usando quegli styp che ho impostato nel CSS

— styzzz il

Per aggiungere css personalizzati e caricare l'ultimo

Segui la struttura della directory

app / codice / fornitore / nome modulo / vista / frontend (per admin adminhtml) / web / css / nomefile.css

Aggiungi il percorso del file css al file di layout corrispondente come indicato di seguito

<head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>

— Manish
fonte

Compreso Vendor_Modulenon funziona per me. Rimuovendolo funzionando bene.

— Saravanan DS,

@SaravananDS è necessario sostituire con il pacchetto e il nome del modulo.

— Manish,

Sì. Dopo aver sostituito con il mio costume Vendor_Modulesolo non funziona.

— Saravanan DS,

@Manish, possiamo caricare file css personalizzati solo nella pagina dei risultati di ricerca?

— jafar pinjar,

Qui non è necessario utilizzare il tema figlio?

— HaFiz Umer,

Puoi aggiungere l'attributo media che magento 2 metterà alla fine del CSS nella sezione head. L'impostazione di una larghezza di solo 1px lo abiliterà su tutti i dispositivi:

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>

— Cypher909
fonte

grazie, mi hai salvato la giornata. Non voglio lavorare con i file .less e compilarli ogni volta che li modifico.

— Bourax,

qui non è necessario creare prima un tema personalizzato?

— HaFiz Umer,

@HaFizUmer Dovresti prima creare un tema personalizzato. Seguire le istruzioni dalla risposta accettata e quindi utilizzare il metodo che mostro qui.

— Cypher909