Desidero sviluppare un normale sito Web con Meteor.js (non un'applicazione web di una sola pagina) e voglio caricare solo file css specifici per ogni pagina . Quindi non tutte le pagine condividono lo stesso codice CSS. È possibile?Come caricare in modo esplicito solo i file css specifici (non tutti) in Meteor.js
Innanzitutto, se si utilizza Meteor non si sta creando un sito "normale", si sta creando una SPA molto potente (applicazione a pagina singola). Puoi imitare un sito web "normale" con l'introduzione del routing, prova con IronRouter.
OK ora su CSS. Una volta distribuito Meteor, tutti i CSS e JS vengono uniti e ridotti. Quindi, se vuoi ottenere ciò che stai chiedendo, dovrai aggiungere un pacchetto come questo.
https://atmospherejs.com/mrt/external-file-loader
https://github.com/davidd8/meteor-external-file-loader
quindi fissare a innescare una volta creato un modello:
Template.myCustomTemplate.created = function() {
Meteor.Loader.loadCss("//example.com/myCSS/style.css");
};
credo si potrebbe anche caricare il CSS dal server Meteor tramite API Asset di Meteor. Ulteriori informazioni qui: https://docs.meteor.com/#/full/assets
Una spiegazione molto breve e accurata di cosa Meteor davvero è! :) +1 –
ma se torniamo alla vista precedente il tuo css è ancora caricato. Ciò che è css non viene rimosso e quindi la visualizzazione precedente css changesd. – Ankita
Poiché l'ultima parte della tua domanda dice "Quindi non tutte le pagine condividono lo stesso codice CSS." potresti prendere in considerazione l'idea di usare meno e avvolgere il tuo modello in una classe div diversa.
Per esempio
file HTML
<template name="page1">
<div class="page1css">
<p class="content">Page 1 content</p>
</div>
</template>
MENO File
.page1css {
.content {
font-size: 2em;
}
}
In questo modo si può semplicemente avvolgere le pagine e il CSS corrispondente nella classe corretta.
In questo modo vengono caricati tutti i CSS per l'intera app, indipendentemente dalla pagina visitata. – benstr
Sì, è vero, ma lo carica anche solo una volta. Quindi usa il CSS specifico per il modello dopo quello. Non ero sicuro di cosa esattamente stava cercando di fare Eugenio. – JoshJoe
Personalmente utilizzo lo stesso concetto per evitare sovrapposizioni tra gli stili per modelli diversi. Anche se consiglio di utilizzare gli ID per differenziare. Il modello pagina1 otterrebbe un ID "view-page1" - Ho solo bisogno di ricordare di non usare alcun ID iniziando con view- per evitare conflitti. Inoltre hai un file common.less con stili condivisi. 'Meteorico aggiungi meno ' –
Ho trovato una soluzione semplice. Nella cartella del progetto Meteor creare una cartella denominata "pubblica" (senza virgolette). In quella cartella crea una cartella chiamata "css" (senza virgolette). Metti il file CSS in quella cartella.
Nel file html che si desidera che il file CSS specifica da applicare per fare quanto segue:
<head>
<link href="css/yourfile.css" rel="stylesheet">
</head>
Questo non è raccomandato - che renderà la vostra applicazione più lento. La migliore pratica attualmente è concatenare tutti i CSS del tuo sito Web in un unico file. – stubailo
Questo non è vero per ogni caso, poiché dipende dalla dimensione del CSS di un sito web. Il processo di caricamento CSS blocca il rendering della pagina. Quindi, se hai qualche CSS, sarà meglio caricarlo completamente o addirittura inserirlo. Ma se hai molti CSS, è meglio caricare prima il CSS necessario per il rendering di una sola pagina o anche solo il contenuto above the fold e rinviare il caricamento degli stili rimanenti. Maggiori informazioni si possono trovare qui: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery – Eugene
@Eugene collegarmi con alcuni punti e accettare una risposta per favore :) – benstr