Aufbau von ionischem SASS mit Grunzen/Steroiden

Question

Ich versuche, ein Prototypprojekt mit zu erstellen Ionisch Und Appgyver-Steroide.Ionic verfügt über eine sehr schöne Reihe von Benutzeroberflächen und Vorlagen, die auf AngularJS basieren.Und Steroids bietet einige tolle Tools zum Testen mobiler Apps (eingebauter Webserver für lokale Tests, automatische Bereitstellungen, Weinre-Debugging, Emulator-Integration, einfacher Workflow für die Bereitstellung auf realen Geräten und Debuggen mit Weinre).Deshalb klang es nach der großartigsten Idee überhaupt, sie zusammenzustellen.

Ich habe einen mutigen Versuch unternommen (siehe unten), der vielversprechend aussieht.Wenn ich jedoch die Steroids-Build-Tools ausführe, versuchen sie, Ionics SASS zu kompilieren, und es treten eine Reihe von Fehlern auf.

Einzelheiten....

Ich habe gerade ein neues Projekt mit Steroiden gestartet und dabei ihren Generatorbefehl verwendet:

steroids create myApp

Dann habe ich Ionic in www/components installiert mit:

bower install driftyco/ionic-bower

Dann habe ich eines davon heruntergeladen Ionische Starterprojekte und manuell mit dem Steroids-Beispielcode zusammengeführt.Ich habe den Ionic-Code verwendet, aber die CSS- und JS-Includes auf www/components umgeleitet.Dann habe ich die Includes aus dem Steroid-Beispielcode kopiert: steroids.js, onerror.js, console.log.js, cordova.js.Ich habe auch die verschiedenen config.xml-Dateien kopiert.

Ich kann irgendwo Beispielcode hochladen, aber ich glaube nicht, dass das tatsächlich kaputt ist.Ich dachte nur, es wäre eine gute Idee, einige Hintergrundinformationen bereitzustellen.Um mein Frankenstein-Monster zu testen, habe ich Folgendes ausgeführt:

steroids connect --serve

Dadurch wird ein kleiner Webserver auf Port 4000 gestartet und ein Link dazu in Ihrem Browser geöffnet.Wenn der Steroid-Server jedoch startet, erkennt er die SCSS-Dateien und versucht, sie zu kompilieren.Ich BRAUCHE sie nicht wirklich kompiliert, da das Bower-Paket vorgefertigte enthält, aber sobald ich die Grundlagen zum Laufen gebracht habe, werde ich wahrscheinlich SASS verwenden wollen, um die App zu gestalten, und es sollte nichts schaden.

Allerdings erhalte ich folgende Fehlermeldungen:

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.

Alle diese undefinierten Mixins und Variablen sind also in meiner Codebasis unten vorhanden www/components/ionic/_mixins.scss Und www/components/ionic/_variables.scss jeweils.Beide sind enthalten von www/components/ionic/ionic.scss.Es sieht so aus, als würde Ionic von Ihnen erwarten, dass Sie ionic.scss kompilieren und alles in der richtigen Reihenfolge (vernünftig) einschließen, mit Ausnahme von Steroiden (die anscheinend verwendet werden). grunt-contrib-sass) versucht, alle SCSS-Dateien im Verzeichnis in einer anderen Reihenfolge zu kompilieren.

Gibt es also eine Möglichkeit, Steroide zu konfigurieren oder? grunt-contrib-sass einfach kompilieren ionic.scss?Wenn das so ist, wie?Wenn das nicht gelingt, wie kann ich die SASS-Kompilierung in Steroids deaktivieren?

Answer 1

Ionic importiert alle SCSS in ionic.scss, daher habe ich alle ausgeschlossen _*.scss aus der Kompilierung mit diesem 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'
            }
          ]...

Answer 2

Merituuli von AppGyver hier.

Die Art und Weise, wie Sie Ionic installiert haben, erscheint unnötig kompliziert und das ist wahrscheinlich der Grund, warum Ihre App kaputt geht.Hier finden Sie Anweisungen, wie Sie Ionic in einem Steroids-Projekt zum Laufen bringen, ohne dass sich Steroids über undefinierte Mixins beschwert:

1. Erstellen Sie ein Steroids-Projekt
2. Laden Sie das Ionic Framework CDN herunter von Hier
3. Gehen Sie in den Ordner des Steroids-Projekts www/vendor und einen neuen Ordner erstellen, zum Beispiel „ionic“
4. Kopieren Sie die gewünschten Dateien aus dem entpackten CDN in den erstellten Ordner
5. Fügen Sie die erforderlichen CSS/JS-Dateien ein application.js/application.css/jede HTML-Datei

Hilft das?

Answer 3

Nachdem ich die Nachricht gesehen habe command connect requires to be in a Steroids project directory Ich fragte mich, was ein Verzeichnis zu einem Steroidprojekt macht?Was mich auf einen anderen Weg führte

• Kopieren Sie das Konfigurationsverzeichnis aus einem Steroidprojekt
• Fügen Sie es in Ihr ionisches Projektverzeichnis ein (als nächstes, aber NICHT im www-Verzeichnis).
• Kopieren Sie die Datei www/loading.html aus einem Steroidprojekt
• Fügen Sie es in das www/-Verzeichnis ein (neben index.html).
• Laufen steroids connect

Dadurch wird ein Steroidprojekt-Migrationsskript gestartet, das Ihr Projekt auf Fehler überprüft, einschließlich Aktualisierungen Ihrer Gruntfile.js- und package.json-Dateien (einige manuelle Eingriffe können erforderlich sein), was absolut brillant ist.

Ich hätte nicht gedacht, dass es so einfach sein würde oder dass es ein Migrationsskript geben würde – danke AppGyver-Team!