Importazione CSS e l'ordine di controllo in <head> utilizzando JSPM e system.js

ho scritto quanto segue in un app AureliaImportazione CSS e l'ordine di controllo in <head> utilizzando JSPM e system.js

import "bootstrap/css/bootstrap.css!"; 
import "./app.css!";

e voglio seconda app.css in quanto prevale stili bootstrap.css. Comunque, sto diventando app.css perché suppongo che il loader system.js li stia eseguendo in parallelo e dato che app.css è il più piccolo dei due viene caricato per primo.

C'è un modo in jspm per definire una dipendenza tra questi due file per controllare il loro ordine di caricamento? Esiste un altro modo?

Molte grazie in anticipo! :)

fonte

2015-08-27 Phil

E qui sono minuti dopo aver postato questa domanda per trovare che il [systemjs] (https: // github.com/systemjs/plugin-css # modular-css-concepts) stati del documento * l'ordine di iniezione CSS non può essere garantito * e io dovrò semplicemente rendere le mie sovrascritture più specifiche! – Phil

Abbiamo alcune cose nella pipeline che dovrebbero aiutarvi con questo problema. Se si estrae questo:

<template> 
    <require from="nav-bar.html"></require> 
    <require from="bootstrap/css/bootstrap.css"></require> 

    <nav-bar router.bind="router"></nav-bar> 

    <div class="page-host"> 
    <router-view></router-view> 
    </div> 
</template>

So che Aurelia passerà i file CSS per il caricatore in ordine, ma non sono sicuro se saremo in grado di garantire l'ordine di caricamento. Speriamo che Rob possa venire qui e dare una risposta adeguata a questo, però. Lo indicherò in questa direzione.

fonte

2015-08-27 23:25:40

Grazie a @Ashley. Ho anche provato quanto segue in app.html: ' ' Ma mentre il debug dice * DEBUG [templating] importando risorse per app.html ["bootstrap/css/bootstrap.css!", "app.css!"] * Sto ancora vedendo app.css prima in . Ho anche visto [aurelia-css] (https://github.com/Aaike/aurelia-css) e gli ho dato una breve rotazione, ma non l'ho ancora fatto funzionare. – Phil

È interessante notare che se importo bootstrap.css ma richiedo app.css, l'ordine viene conservato ... ma non so se si tratti solo della cieca fortuna o della pipeline di Aurelia. – Phil

Phil, il codice che ho mostrato sopra non è ancora stato rilasciato. Spero che venga rilasciato entro la prossima settimana. Al momento non supportiamo la sintassi dall'alto. –

Ho avuto esattamente lo stesso problema. L'ordine di controllo del CSS non è possibile in JSPM. Ho risolto questo problema con SASS e alcuni trucchi. Ecco quello che ho fatto:

in HTML darvi qualche elemento principale ID:

<html id="some-id">

quindi si crea il file sass che ospiterà le sostituzioni (_overrides.scss):

#some-id { 
    @import "buttons"; 
}

ora il vostro buttons.scss può ignorare stili dal bootstrap (_buttons.scss):

.btn-default { 
    background-color: #B6B3C7; 
    border-color: #B33A3A; 
}

questo funziona grazie alla pr inciple in CSS: vince il selettore più specifico. Con il wrapping di tutte le personalizzazioni in # some-id in scss produrrà il codice con ogni bit di codice che viene importato in parentesi graffe preceduto da # some-id. In questo modo il tuo selettore sarà sempre più specifico di quello di bootstrap e lo sovrascriverà.

Non so se questo sarà sufficiente per te dato che non parli di scss, ma era per me.

fonte

2015-08-30 20:49:56

Grazie per il feedback. Avevo già finito con lo fare in css standard, ma come puoi immaginare è un dolore aggiunto prefissi ad ogni selettore !! – Phil

Sì, è un dolore. Ecco perché suggerisco di andare con sass. –

Si potrebbe provare a importare il css utilizzando System.import. E.g. nel vostro index.html:

System.import('bootstrap/css/bootstrap.css!').then(() => { 
    System.import('./app.css!'); 
});

Ma tenere a mente che in questo modo è necessario assicurarsi che system.js è servita con la vostra applicazione. Pertanto non è possibile raggruppare l'intera app come pacchetto autoeseguibile.

fonte

2015-10-15 08:37:46 LazerBass

Ho riscontrato problemi simili durante lo sviluppo. Il seguente codice mi ha aiutato a risolvere il mio problema. Ora tutto si sta caricando esattamente nel modo in cui lo voglio.

System.import('bootstrap/css/bootstrap.css!').then(() => { 
    System.import('./app.css!'); 
});

Grazie a LazerBass per questo suggerimento.

fonte

2016-06-04 16:12:43

Importazione CSS e l'ordine di controllo in <head> utilizzando JSPM e system.js

risposta

Problemi correlati