Costruire sassù ionico con grugniti / steroidi

StackOverflow https://stackoverflow.com//questions/23038467

Domanda

Sto cercando di costruire un progetto prototipo usando ionic e Appgyver steroidi . Ionic ha un set molto carino di uis e roba del modello, costruita in cima a Angularjs. E gli steroidi offrono alcuni strumenti fantastici per testare le app mobili (integrate in web server per il test locale, le distribuzioni automatiche, il debug di wein, l'integrazione dell'emulatore, il flusso di lavoro facile da distribuire su dispositivi reali e debug con Weinre). Quindi metterli insieme sembravano l'idea più fantastica di sempre.

Ho fatto un tentativo di valoroso (dettagliato di seguito), che sembra promettente. Tuttavia, quando eseguo gli strumenti di build steroidi, cercano di compilare il sass di Ionic e incontrano un gruppo di errori.

Dettagli ....

Ho appena iniziato un nuovo progetto con steroidi, usando il comando del proprio generatore: 

steroids create myApp
.

Quindi, ho installato ionico in www / componenti con: 

bower install driftyco/ionic-bower
.

Allora, ho scaricato uno dei Progetti ionici di avviamento e uniti manualmente con il Codice campione di steroidi. Ho usato il codice ionico, ma reindirizzato il CSS e JS includono www / componenti. Quindi ho copiato oltre le comprende dal codice steroidi campione: steroids.js, onerror.js, console.log.js, cordova.js. Ho anche copiato i file Config.xml assortiti.

Posso caricare un codice di esempio da qualche parte, ma non penso che sia in realtà ciò che è rotto. Ho solo pensato che sarebbe stata una buona idea fornire alcuni di sfondo. Per testare il mostro del mio Frankenstein, ho corso: 

steroids connect --serve
.

che avvia un piccolo server Web sulla porta 4000 e apre un collegamento ad esso nel tuo browser. Tuttavia, quando il server steroidi sta avviando, rileva i file SCSS e cerca di compilarli. Non ho davvero bisogno di loro compilato, dal momento che il pacchetto BOWER include quelli pre-costruiti, ma una volta che ho lavorato le basi, probabilmente vorrò usare Sass per modellare l'app, e non dovrebbe danneggiare nulla. .

Tuttavia, ottengo i seguenti errori: 

Running "steroids-compile-sass" task
SASS files found, attempting to compile them to dist/...

Running "sass:dist" (sass) task
Syntax error: Undefined mixin 'display-flex'.
        on line 8 of www/components/ionic/scss/_button-bar.scss, in `display-flex'
        from line 8 of www/components/ionic/scss/_button-bar.scss
  Use --trace for backtrace.

Syntax error: Undefined variable: "$checkbox-height".
        on line 10 of www/components/ionic/scss/_checkbox.scss
  Use --trace for backtrace.

Syntax error: Undefined variable: "$z-index-action-sheet".
        on line 27 of www/components/ionic/scss/_action-sheet.scss
  Use --trace for backtrace.

Syntax error: Undefined variable: "$line-height-base".
        on line 8 of www/components/ionic/scss/_form.scss
  Use --trace for backtrace.

Syntax error: Undefined mixin 'button-style'.
        on line 9 of www/components/ionic/scss/_button.scss, in `button-style'
        from line 9 of www/components/ionic/scss/_button.scss
  Use --trace for backtrace.

Syntax error: Undefined mixin 'translate3d'.
        on line 19 of www/components/ionic/scss/_animations.scss, in `translate3d'
        from line 19 of www/components/ionic/scss/_animations.scss
  Use --trace for backtrace.

File "dist/components/ionic/scss/_button-bar.css" created.
Warning:  Use --force to continue.

Aborted due to warnings.
Syntax error: Undefined mixin 'badge-style'.
        on line 8 of www/components/ionic/scss/_badge.scss, in `badge-style'
        from line 8 of www/components/ionic/scss/_badge.scss
  Use --trace for backtrace.

Syntax error: Undefined mixin 'display-flex'.
        on line 8 of www/components/ionic/scss/_bar.scss, in `display-flex'
        from line 8 of www/components/ionic/scss/_bar.scss
  Use --trace for backtrace.
.

Quindi, tutti quei indefiniti mixins e variabili sono presenti nella mia base di codice, sotto www/components/ionic/_mixins.scss e www/components/ionic/_variables.scss rispettivamente. Entrambi sono inclusi da www/components/ionic/ionic.scss. Sembra che Ionic ti aspetti di compilare Ionic.Scss e lascia che includa tutto nell'ordine giusto (ragionevole), ma gli steroidi (che sembrano utilizzare grunt-contrib-sass) sta cercando di compilare tutti i file SCSS nella directory, in qualche altro ordine.

Quindi, c'è un modo per configurare steroidi o grunt-contrib-sass per compilare solo ionic.scss? Se é cosi, come? In caso contrario, come posso disabilitare la compilazione sass in steroidi?

È stato utile?

Soluzione

Ionic Importa tutti gli SCS in Ionic.SCSS, quindi ho escluso tutto _*.scss dalla compilazione con questo hack in \node_modules\grunt-steroids\tasks\steroids-compile-sass.coffee : 

 ...files: [
            {
              expand: true
              cwd: 'app/'
              src: ['**/!(_*).scss', '**/!(_*).sass']
              dest: 'dist/'
              ext: '.css'
            }
            {
              expand: true
              cwd: 'www/'
              src: ['**/!(_*).scss', '**/!(_*).sass']
              dest: 'dist/'
              ext: '.css'
            }
          ]...
.

Altri suggerimenti

Merituuli da Appgyver qui.

Il modo in cui hai installato Ionico sembra inutilmente complicato e questo è ciò che probabilmente rompe la tua app.Ecco le istruzioni su come ottenere il lavoro ionico all'interno di un progetto steroidi senza steroidi lamentandosi di mixins indefiniti:

    .
  1. crea progetto steroidi
  2. Scarica ionic framework cdn da qui
  3. Entra nel progetto Steroidi nella cartella www/vendor e crea una nuova cartella, ad esempio "Ionic"
  4. Copia i file desiderati dal CDN non condito alla cartella creata
  5. Includi i file CSS / JS necessari in application.js / application.css / ogni file HTML

    6. Aiuto?

Dopo aver visto il messaggio command connect requires to be in a Steroids project directory mi chiedevo, cosa rende una directory un progetto steroideo?Che mi ha portato in un altro modo

    .
  • Copia la directory di configurazione da un progetto steroidi
  • incollalo nella tua directory del progetto ionico (successivo ma non all'interno della directory www)
  • Copia il file www / loading.html da un progetto steroidi
  • Incollalo nel www / directory (accanto a index.html)
  • Esegui steroids connect

Avvia uno script di migrazione del progetto Steroids che controlla il tuo progetto per errori, inclusi gli aggiornamenti ai file GruntFile.js e Package.json (potrebbe essere necessario un intervento manuale) che è assolutamente brillante.

Non pensavo che sarebbe stato così semplice o ci sarebbe stato uno script di migrazione - grazie Appasyver Team!

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top