Rispettare il CSS @import quando si costruisce l'app con gulp-useref

Question

Io uso l'interfaccia utente jQuery nel mio progetto e lo compro con gulp. Includo i suoi stili nel modo seguente:

<!-- build:css styles/vendor/jqueryui.css --> 
<link rel="stylesheet" href="bower_components/jqueryui/themes/base/jquery.ui.all.css"> 
<!-- endbuild --> 

Quando costruisco con gulp-useref plug-in, si trasforma in:

<link rel="stylesheet" href="styles/vendor/jqueryui.css"/> 

Il problema è che il contenuto della styles/vendor/jqueryui.css aspetto:

@import "jquery.ui.base.css";@import "jquery.ui.theme.css"; 

Queste importazioni ovviamente non riescono nel pacchetto di distribuzione, perché non ci sono file jquery.ui.base.css e jquery.ui.theme.css. Non sono stati spostati nel pacchetto dist da bower_components/jqueryui/themes/base/.

Come includere correttamente il tema dell'interfaccia utente jQuery senza specificando tutti i file jquery.*.css?

Answer 1

Se si utilizza gulp, è necessario creare gli stili dell'interfaccia utente jQuery FIRST quindi collegare gli stili del fornitore a una directory di build. In questo modo hai un CSS compilato che non espone la tua fonte (bower_components). Se non hai bisogno di TUTTI gli stili jQuery, crea quelli che hai bisogno esplicitamente in un compito separato, quindi collegalo agli stili principali o prosegui con il resto della build. Questo potrebbe essere importante per te se esiste una catena di dipendenze.

TL; DR il codice HTML deve essere collegato solo agli stili compilati, non alla fonte.