Temi - Uso di biblioteche esterne

Question

Attualmente stiamo lavorando a un tema Magento 2 di zecca basato sul genitore del sass bianco di SnowDog. Dopo molte ricerche abbiamo capito un sacco di caratteristiche e approfondimenti interessanti su come costruire un pacchetto a tema solido ed estensibile. La cosa di cui non siamo così sicure è come utilizzare quadri e librerie esterne come ad esempio Bootstrap3 o font fantastico.

Ci siamo imbattuti in diverse idee interessanti basate su Brower, che possono caricare pacchetti da tutto il posto e includerli all'interno del tema. La cosa è, dove li mettiamo e comporterà tutto con la compilazione del sass. Abbiamo puntato il parametro della Directory BOWER alla cartella // librata e metti un Git ignora nella radice del tema. Sulla base di questa idea, possiamo ad esempio @import quelli nel nostro file _styles.scss e utilizzare tutti i mixini e le variabili indicati.

Alla fine, non sono totalmente sicuro se questo è il modo in cui Magento lo vuole. Voglio dire, la biblioteca jQuery è inserita all'interno della cartella / lib / web che potrebbe fungere da cartella del venditore per Bower. Quindi, nello stesso momento, l'ho spiegato all'interno di questo argomento, ne abbiamo anche provato in pratica e inserire Bootstrap-Sass nella cartella Lib / Web. Sfortunatamente questo non funzionerà perché la distribuzione statica rimarrà bloccata nel processo principalmente perché semplicemente non sa come gestire i file .SCSS?

Spero che alcuni di voi possano aiutarci a trovare il modo giusto / posizione di dove mettere tutte quelle librerie e quadro. Bower può aiutare a assegnare se avremo il modo giusto.

Answer 1

Finché il compilatore Sass (che sia magento / Gulp / Grunt) può vedere il framework che non importa troppo.

Una cosa da notare è quando si utilizza il compilatore di Magento (sass o meno) non penso che tu possa importare da /lib con @import "../../../../lib". È intenzionalmente limitato a causa di problemi di sicurezza.

Ho aggiunto Bootstrap in due temi finora, uno usando un tema magento (Luma) e uno usando il tema vuoto del snowdog (e Frontatools per compilare). È così che l'ho fatto.

Tema Sass Blank

Quando si utilizza il tema vuoto dello snowdog aggiungo i miei framework / librerie di terze parti in /app/design/frontend/VENDOR/THEME/styles/vendor. Quindi possono essere importati allo stesso modo di un progetto non magento.

Temi Magento standard

Quando si lavora con la compilazione Magento predefinita (non usando GUGP / GRING) aggiungo i framework / librerie di terze parti a /app/design/frontend/VENDOR/THEME/web/css/vendor/. Può quindi essere importato come normale.

@import 'vendor/bootstrap/_bootstrap.less';

.

Non ho usato Brower con Magento 2, ma non riesco a vederlo essere diverso, assicurarsi solo accertarsi installare le librerie / framework per stili / fornitore in modo da poterli facilmente importarti.