Sostituzione di stili di temi vuoti in Magento 2

Come faresti a sovrascrivere gli stili di navigazione per un tema personalizzato quando erediti dal tema vuoto in Magento 2?

Ho un theme.cssfile nella mia app/design/frontend/<Vendor>/<theme>/web/csscartella, ma sono consapevole che Magento 2 usa MENO. Posso facilmente ignorare gli stili nel mio theme.cssfoglio di stile, ma non voglio continuare a usarli !important.

Inoltre, sto usando Bootstrap 3 e presumo che gli stili dal tema vuoto avranno la precedenza su tutte le istruzioni di stile corrispondenti a Bootstrap. Qual è il modo migliore per affrontare questo?

— Gareth Daine
fonte

Risposte:

I 2 modi consigliati da Magento per sostituire o estendere gli stili da un tema principale:

1. Modo semplice

Estendere:

Nella directory dei temi, crea una web/css/sourcesottodirectory. (Hai già fatto questa parte) Crea un _extend.lessfile lì.

Secondo la documentazione :

"L'estensione di un tema utilizzando _extend.less è l'opzione più semplice quando sei soddisfatto di tutto il tema principale, ma vuoi aggiungere più stili."

Oltrepassare:

Invece di creare il _extend.lessfile, si crea un _theme.lessfile. In questo caso è necessario copiare tutte le variabili necessarie dal genitore _theme.less, comprese quelle che non verranno modificate. Quindi apportare le modifiche.

Secondo la documentazione , lo svantaggio è:

"Devi monitorare e aggiornare manualmente i tuoi file ogni volta che _theme.less del genitore viene aggiornato."

2. Modo strutturato

Estendere:

Questo metodo ti consente di organizzare il tuo codice in un modo migliore. Le tue modifiche saranno strutturate. Invece di utilizzare un singolo _extend.less file per includere tutte le modifiche, si crea un file di estensione per ciascun componente dalla libreria dell'interfaccia utente di Magento che si desidera modificare.

Supponi di voler estendere gli stili dai pulsanti e dai componenti di navigazione. Nella directory del tema creare 2 file: _buttons_extend.lesse _navigation_extend.lessquindi aggiungere le modifiche per ciascun componente nel file corrispondente.

Quindi si crea il _extend.lessfile aggiungendo questo codice:

@import '_buttons_extend.less'; 
@import '_navigation_extend.less';

Oltrepassare:

Nel vostro tema, creare una copia del file corrispondente al componente dell'interfaccia utente che si desidera modificare ( _buttons.less, _navigation.less, ecc) Questo file sovrascriverà la _buttons.lessdel tema genitore.

È importante notare la differenza tra l' override e l' estensione .

Puoi leggere ulteriori informazioni sull'override e l'estensione in questa documentazione o sui CSS in Magento 2 nella Guida per gli sviluppatori di Frontend .

— Luis Garcia
fonte

Supponiamo che io abbia una cartella Vendor_Namespace, aggiungo un'altra cartella denominata "web / css / source / _extend.less" e il file _extend.less in web / css / source / saprà dove si trova il file corrispondente? Lo capisco correttamente

— Max

Sì, basta creare il file web/css/source/_extend.lesse inserire i tuoi stili.

— Luis Garcia,

Ho creato un file _extend.less per importare un _slider.less: <theme_folder> / css / source / entrambi i file si trovano nello stesso percorso, ma non funzionano, tutte le regole in _slider.less non sono state trovate nei file generati da .css, Sono in modalità sviluppatore ed

— eseguo

Hai cancellato la cache del tuo browser?

— Luis Garcia,

Posso eseguire l'override di <theme_folder> / css / source / lib / variabili? come posso cambiare una variabile di un file in meno? (diciamo che voglio sovrascrivere lo sfondo del pulsante @ per esempio) - ho bisogno di scriverlo all'interno di _buttons_extend.less o posso sovrascrivere tutto il lin / web / css / source / lib / variabili

— Goldy,

Ho avuto un problema simile usando Foundation. Il modo ufficiale per farlo è quello di sovrascrivere il file meno del modulo specifico e modificare lì il CSS. Sarà quindi raccolto da Magento durante la compilazione

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/debug-theme.html#debug-theme-style

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

Alla fine ho finito per rimuovere tutti i file CSS predefiniti creati da Magento. Ho trovato molto più facile scrivere CSS personalizzati, specialmente usando un framework come Bootstrap, piuttosto che provare a sovrascrivere tutti i vari moduli. Puoi farlo in:

app/design/frontend/{vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <remove src="css/styles-m.css" />
    <remove src="css/styles-l.css" />
    <remove src="css/print.css" />
    <remove src="css/styles.css" />
</head>
</xml>

— Mike Stumpf
fonte

Buon modo di impegnare cose. Ma la domanda riguarda "l'estensione" di un tema completo e l'aggiunta di altro.

— Miguel Felipe Guillen Calo,

No, la domanda riguarda l'override.

— Nero

Diciamo che vuoi sovrascrivere styles-m.css , quindi inserire la copia web/cssdel tuo tema, chiamala custom-styles-m.css .

Quindi utilizzare questo codice nei temi default_head_blocks.xml :

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <remove src="css/styles-m.css" />
        <css src="css/custom-styles-m.css" />
        ...

— Nero
fonte