Construire un SASS ionique avec des grognements/stéroïdes

Question

J'essaie de construire un projet prototype en utilisant Ionique et Stéroïdes Appgyver.Ionic dispose d'un très bel ensemble d'interfaces utilisateur et de modèles, construits sur AngularJS.Et Steroids propose des outils impressionnants pour tester les applications mobiles (serveur Web intégré pour les tests locaux, déploiements automatiques, débogage Weinre, intégration d'émulateur, flux de travail facile à déployer sur des appareils réels et déboguer avec Weinre).Donc les assembler semblait être l’idée la plus géniale qui soit.

J'ai fait une vaillante tentative (détaillée ci-dessous), qui semble prometteuse.Cependant, lorsque j'exécute les outils de construction Steroids, ils essaient de compiler le SASS d'Ionic et rencontrent de nombreuses erreurs.

Détails....

Je viens de démarrer un nouveau projet avec Steroids, en utilisant leur commande de générateur :

steroids create myApp

Ensuite, j'ai installé Ionic dans www/components avec :

bower install driftyco/ionic-bower

Ensuite, j'ai téléchargé l'un des Projets de démarrage ionique et je l'ai fusionné manuellement avec l'exemple de code Steroids.J'ai utilisé le code Ionic, mais j'ai redirigé les inclusions CSS et JS vers www/components.Ensuite, j'ai copié les inclusions de l'exemple de code Steroids : steroids.js, onerror.js, console.log.js, cordova.js.J'ai également copié les fichiers config.xml assortis.

Je peux télécharger un exemple de code quelque part, mais je ne pense pas que ce soit réellement ce qui ne fonctionne pas.J'ai juste pensé que ce serait une bonne idée de fournir un peu de contexte.Afin de tester mon monstre de Frankenstein, j'ai lancé :

steroids connect --serve

qui démarre un petit serveur Web sur le port 4000 et ouvre un lien vers celui-ci dans votre navigateur.Cependant, au démarrage du serveur stéroïdes, il détecte les fichiers SCSS et tente de les compiler.Je n'ai pas vraiment BESOIN de les compiler, car le package bower en inclut des pré-construits, mais une fois que j'aurai compris les bases, je souhaiterai probablement utiliser SASS pour styliser l'application, et cela ne devrait rien faire de mal.

Cependant, j'obtiens les erreurs suivantes :

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.

Ainsi, tous ces mixins et variables non définis sont présents dans ma base de code, sous www/components/ionic/_mixins.scss et www/components/ionic/_variables.scss respectivement.Ces deux éléments sont inclus par www/components/ionic/ionic.scss.Il semble que Ionic s'attend à ce que vous compilez ionic.scss et que vous le laissiez inclure tout dans le bon ordre (raisonnable), mais les stéroïdes (qui semblent utiliser grunt-contrib-sass) essaie de compiler tous les fichiers SCSS du répertoire, dans un autre ordre.

Alors, existe-t-il un moyen de configurer les stéroïdes ou grunt-contrib-sass il suffit de compiler ionic.scss?Si c'est le cas, comment?A défaut, comment puis-je désactiver la compilation SASS dans Steroids ?

Answer 1

Ionic importe tous les scss dans ionic.scss, j'ai donc tout exclu _*.scss de la compilation avec ce 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 d'AppGyver ici.

La façon dont vous avez installé Ionic semble inutilement compliquée et c'est probablement ce qui casse votre application.Voici les instructions pour faire fonctionner Ionic dans un projet Steroids sans que Steroids ne se plaigne de mixins non définis :

1. Créer un projet de stéroïdes
2. Téléchargez le CDN du framework Ionic à partir de ici
3. Allez dans le projet Steroids dans le dossier www/vendor et créez un nouveau dossier, par exemple "ionic"
4. Copiez les fichiers souhaités du CDN décompressé vers le dossier créé
5. Incluez les fichiers CSS/js nécessaires dans application.js/application.css/chaque fichier HTML

est-ce que cela aide?

Answer 3

Après avoir vu le message command connect requires to be in a Steroids project directory Je me suis demandé, qu'est-ce qui fait d'un répertoire un projet stéroïde ?Ce qui m'a conduit vers une autre voie

• Copiez le répertoire de configuration d'un projet stéroïdes
• Collez-le dans le répertoire de votre projet ionique (suivant mais PAS dans le répertoire www)
• Copiez le fichier www/loading.html d'un projet sur les stéroïdes
• Collez-le dans le répertoire www/ (à côté de index.html)
• Courir steroids connect

Cela démarre un script de migration de projet stéroïdes qui vérifie les erreurs de votre projet, y compris les mises à jour de vos fichiers Gruntfile.js et package.json (une intervention manuelle peut être nécessaire), ce qui est absolument génial.

Je ne pensais pas que ce serait si simple ou qu'il y aurait un script de migration - merci à l'équipe AppGyver !